Изменение начальных часов в jquery Week Calender?

Question

Я использую календарь недели jquery для планирования некоторых встреч, все работает отлично, но я хочу, чтобы календарь начинался с 6:00 утра вместо 12:00. Я проверил все функции jquery для настройки календаря, но не смог найти способ изменить это. Я также проверил файл jquery.weekcalendar.js, но не смог найти способ (или не мог понять, что делать) для достижения этой цели. Есть ли способ достичь этого или его просто невозможно для этого календаря? Любая помощь будет высоко оценен. Благодарю.

Answer 1

Вы должны businessHours варианта, начать определяет начальное время для отображения и конца определяет время окончания для отображения.

$('#calendar').weekCalendar({ 
     data: eventData, 
     firstDayOfWeek: dayOfWeek, 
     timeslotsPerHour: 4, 
     allowCalEventOverlap: true, 
     overlapEventsSeparate: true, 
     totalEventsWidthPercentInOneColumn: 95, 
     buttons: false, 
     title: '', 
     // ***HERE IS THE OPTION YOU NEED TO USE*** 
     businessHours: { start: 10, end: 22, limitDisplay: true }, 
     height: function ($calendar) { 
      return $(window).height() - $('h1').outerHeight(true); 
     }, 
     eventRender: function (calEvent, $event) { 
      if (calEvent.title == "Booked Slot") { 
       var classe = $event.attr('class'); 
       $event.attr('class', classe + ' colr'); 
      } 
     }, 
     resizable: function (calEvent, $event) { 
      if (calEvent.title == "Booked Slot") { 
       return false; 
      } 
      return true; 
     }, 
     draggable: function (calEvent, $event) { 
      if (calEvent.title == "Booked Slot") { 
       return false; 
      } 
      return true; 
     }, 
     eventNew: function (calEvent, $event) { 
      debugger; 
      displayMessage('<strong>Added event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end); 
      //alert('You\'ve added a new event. You would capture this event, add the logic for creating a new event with your own fields, data and whatever backend persistence you require.'); 
      var $dialogContent = $("#event_edit_container"); 
      resetForm($dialogContent); 
      var startField = $dialogContent.find("select[name='start']").val(calEvent.start); 
      var endField = $dialogContent.find("select[name='end']").val(calEvent.end); 
      var titleField = $dialogContent.find("input[name='title']"); 
      var bodyField = $dialogContent.find("textarea[name='body']"); 


      $dialogContent.dialog({ 
       modal: true, 
       title: "New Calendar Event", 
       close: function() { 
        $dialogContent.dialog("destroy"); 
        $dialogContent.hide(); 
        $('#calendar').weekCalendar("removeUnsavedEvents"); 
       }, 
       buttons: { 
        save: function() { 
         calEvent.id = id; 
         id++; 
         calEvent.start = new Date(startField.val()); 
         calEvent.end = new Date(endField.val()); 
         calEvent.title = titleField.val(); 
         calEvent.body = bodyField.val(); 

         $calendar.weekCalendar("removeUnsavedEvents"); 
         $calendar.weekCalendar("updateEvent", calEvent); 
         $dialogContent.dialog("close"); 
        }, 
        cancel: function() { 
         $dialogContent.dialog("close"); 
        } 
       } 
      }).show(); 

      $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start)); 
      setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start)); 
     }, 
     eventDrop: function (calEvent, $event) { 
      displayMessage('<strong>Moved Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end); 
     }, 
     eventResize: function (calEvent, $event) { 
      displayMessage('<strong>Resized Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end); 
     }, 
     eventClick: function (calEvent, $event) { 
      debugger; 
      displayMessage('<strong>Clicked Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end); 

      if (calEvent.readOnly) { 
       return; 
      } 

      var $dialogContent = $("#event_edit_container"); 
      resetForm($dialogContent); 
      var startField = $dialogContent.find("select[name='start']").val(calEvent.start); 
      var endField = $dialogContent.find("select[name='end']").val(calEvent.end); 
      var titleField = $dialogContent.find("input[name='title']").val(calEvent.title); 
      var bodyField = $dialogContent.find("textarea[name='body']"); 
      bodyField.val(calEvent.body); 

      $dialogContent.dialog({ 
       modal: true, 
       title: "Edit - " + calEvent.title, 
       close: function() { 
        $dialogContent.dialog("destroy"); 
        $dialogContent.hide(); 
        $('#calendar').weekCalendar("removeUnsavedEvents"); 
       }, 
       buttons: { 
        save: function() { 

         calEvent.start = new Date(startField.val()); 
         calEvent.end = new Date(endField.val()); 
         calEvent.title = titleField.val(); 
         calEvent.body = bodyField.val(); 

         $calendar.weekCalendar("updateEvent", calEvent); 
         $dialogContent.dialog("close"); 
        }, 
        "delete": function() { 
         $calendar.weekCalendar("removeEvent", calEvent.id); 
         $dialogContent.dialog("close"); 
        }, 
        cancel: function() { 
         $dialogContent.dialog("close"); 
        } 
       } 
      }).show(); 

      var startField = $dialogContent.find("select[name='start']").val(calEvent.start); 
      var endField = $dialogContent.find("select[name='end']").val(calEvent.end); 
      $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start)); 
      setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start)); 
      $(window).resize().resize(); //fixes a bug in modal overlay size ?? 
     }, 
     eventMouseover: function (calEvent, $event) { 
      displayMessage('<strong>Mouseover Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end); 
     }, 
     eventMouseout: function (calEvent, $event) { 
      displayMessage('<strong>Mouseout Event</strong><br/>Start: ' + calEvent.start + '<br/>End: ' + calEvent.end); 
     }, 
     noEvents: function() { 
      displayMessage('There are no events for this week'); 
     } 
    }); 

    function displayMessage(message) { 
     //$('#message').html(message).fadeIn(); 
    }