jqueryの開始時間を変更するWeek Calender？

Question

私は予定をスケジューリングするためにjquery weekカレンダーを使用していますが、すべてがうまくいっていますが、カレンダーは午前12時から午前6時まで開始します。私はカレンダーのカスタマイズのためにすべての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(); 
    }