jQuery addClass example

Change class name on click in jQuery

by makelele24

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<div id="dialogHorario" title="Horarios de la asignatura">
    <div id='calendar'></div>
    <div id='datepicker' class="datetimepicker-iso"></div>
</div>

<div id="mode" class="bootstrap-iso modal fade" tabindex="-1" >
  <div class="modal-dialog" role="dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Programar clase</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            <label class="col-xs-4" for="starts-at">Inicio: </label>
            <input type="text" name="starts_at" id="starts-at" />
          </div>
        </div>
        <div class="row">
       ...

CSS

a#editarHorario {
    color: white;
    background-color: red;
}

JavaScript

dialogHorario = $( "#dialogHorario" ).dialog({
	autoOpen: false,
  height: 600,
  width: 600,
  modal: true
});

$( "#editarHorario" ).on( "click", function() {
            
	event.preventDefault();

  $('#calendar').fullCalendar({
      header: {
      	left: 'prev,next today',
        center: 'title',
        right: 'month'
      },
      navLinks: false, 
      selectable: true,
      selectHelper: true,
      weekends: false,
      select: function(start, end) {
      // Display the modal.
      // You could fill in the start and end fields based on the parameters
      	$('.modal').modal('show');
      },
      eventClick: function(event, element) {
      // Display the modal and set the values to the event values.
      	$('.modal').modal('show');
        $('.modal').find('#title').val(event.title);
        $('.modal').find('#starts-at').val(event.start);
        $('.modal').find('#ends-at').val(event.end);
			},
      editable: true,
      eventLimit: true // allow "more" link when too many events
  });

  // Bind the dates to datetimepicker.
  // You should pass the options you need
  $("#starts-at, #ends-at").datetimepicker();
            
  // Whenever the user clicks on the "save" button om the dialog
  $('#save-event').on('click', function() {
  	 var title = $('#title').val();
  	 if (title) {
         var eventData = {
            title: title,
            start: $('#starts-at').val(),
            end: $('#ends-at').val()
         };
         $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
     }
   
     $('#calendar').fullCalendar('unselect');

     // Clear modal inputs
     $('.modal').find('input').val('');
     // hide modal
     $('.modal').modal('hide');
  });
            
  dialogHorario.dialog( "open" );
});