如何在fullcalendar上添加businessHours

$(document).ready(function(){ 
     var calendar = $('#calendar').fullCalendar({ 
      header:{ 
       left: 'prev,next today', 
       center: 'title', 
       right: 'agendaWeek,agendaDay' 
      }, 
      defaultView: 'agendaWeek', 
      editable: false, 
      selectable: true, 
      allDaySlot: false, 

      events: "index.php?view=1&owner=" + owner_userid, 
      // so this is where i started to put the businessHours code 
      businessHours: //so on this line i tried adding business hours 
      { 

      start: '6:00', //start of business time 
      end: '24:00', //end of business time 
      dow: [ 1, 2, 3, 4, 5,6,0] //array that shows the days of the week 1 for monday 0 for sunday 
      } 
      //here is where it ends 


      eventClick: function(event, jsEvent, view) { 
       endtime = $.fullCalendar.moment(event.end).format('h:mm'); 
       starttime = $.fullCalendar.moment(event.start).format('dddd,MMMM Do YYYY, h:mm'); 
       var mywhen = starttime + ' - ' + endtime; 
       $('#modalTitle').html(event.title); 
       $('#modalWhen').text(mywhen); 
       $('#eventID').val(event.id); 
       $('#calendarModal').modal(); 
      },

日历显示我的业务时间仍然始于上午12点，但我希望它在6点开始我该怎么做？我已经添加businessHours代码，所以我确定我做错了，请帮助我。如何在fullcalendar上添加businessHours

来源

2016-12-24 Nick Solante

看到一个工作演示：SOURCE

$(function() { 
 

 
\t var todayDate = moment().startOf('day'); 
 
\t var YM = todayDate.format('YYYY-MM'); 
 
\t var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD'); 
 
\t var TODAY = todayDate.format('YYYY-MM-DD'); 
 
\t var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD'); 
 

 
\t $('#calendar').fullCalendar({ 
 
\t \t header: { 
 
\t \t \t left: 'prev,next today', 
 
\t \t \t center: 'title', 
 
\t \t \t right: 'month,agendaWeek,agendaDay,listWeek' 
 
\t \t }, 
 
\t \t editable: true, 
 
\t \t eventLimit: true, // allow "more" link when too many events 
 
\t \t navLinks: true, 
 
\t \t businessHours: true, 
 
\t \t events: [ 
 
\t \t \t { 
 
\t \t \t \t title: 'All Day Event', 
 
\t \t \t \t start: YM + '-01' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Long Event', 
 
\t \t \t \t start: YM + '-07', 
 
\t \t \t \t end: YM + '-10' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t id: 999, 
 
\t \t \t \t title: 'Repeating Event', 
 
\t \t \t \t start: YM + '-09T16:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t id: 999, 
 
\t \t \t \t title: 'Repeating Event', 
 
\t \t \t \t start: YM + '-16T16:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Conference', 
 
\t \t \t \t start: YESTERDAY, 
 
\t \t \t \t end: TOMORROW 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Meeting', 
 
\t \t \t \t start: TODAY + 'T10:30:00', 
 
\t \t \t \t end: TODAY + 'T12:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Lunch', 
 
\t \t \t \t start: TODAY + 'T12:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Meeting', 
 
\t \t \t \t start: TODAY + 'T14:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Happy Hour', 
 
\t \t \t \t start: TODAY + 'T17:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Dinner', 
 
\t \t \t \t start: TODAY + 'T20:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Birthday Party', 
 
\t \t \t \t start: TOMORROW + 'T07:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Click for Google', 
 
\t \t \t \t url: 'http://google.com/', 
 
\t \t \t \t start: YM + '-28' 
 
\t \t \t } 
 
\t \t ], 
 
    businessHours: { 
 
    dow: [ 1, 2, 3, 4 ], 
 
    start: '6:00', 
 
    end: '18:00' 
 
} \t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="apple-touch-icon" sizes="57x57" href="https://fullcalendar.io/apple-touch-icon-57x57.png"> 
 
<link rel="apple-touch-icon" sizes="114x114" href="https://fullcalendar.io/apple-touch-icon-114x114.png"> 
 
<link rel="apple-touch-icon" sizes="72x72" href="https://fullcalendar.io/apple-touch-icon-72x72.png"> 
 
<link rel="apple-touch-icon" sizes="144x144" href="https://fullcalendar.io/apple-touch-icon-144x144.png"> 
 
<link rel="apple-touch-icon" sizes="60x60" href="https://fullcalendar.io/apple-touch-icon-60x60.png"> 
 
<link rel="apple-touch-icon" sizes="120x120" href="https://fullcalendar.io/apple-touch-icon-120x120.png"> 
 
<link rel="apple-touch-icon" sizes="76x76" href="https://fullcalendar.io/apple-touch-icon-76x76.png"> 
 
<link rel="apple-touch-icon" sizes="152x152" href="https://fullcalendar.io/apple-touch-icon-152x152.png"> 
 
<link rel="apple-touch-icon" sizes="180x180" href="https://fullcalendar.io/apple-touch-icon-180x180.png"> 
 
<link rel="icon" type="image/png" href="https://fullcalendar.io/favicon-192x192.png" sizes="192x192"> 
 
<link rel="icon" type="image/png" href="https://fullcalendar.io/favicon-160x160.png" sizes="160x160"> 
 
<link rel="icon" type="image/png" href="https://fullcalendar.io/favicon-96x96.png" sizes="96x96"> 
 
<link rel="icon" type="image/png" href="https://fullcalendar.io/favicon-16x16.png" sizes="16x16"> 
 
<link rel="icon" type="image/png" href="https://fullcalendar.io/favicon-32x32.png" sizes="32x32"> 
 
<meta name="msapplication-TileColor" content="#2b5797"> 
 
<meta name="msapplication-TileImage" content="https://fullcalendar.io/mstile-144x144.png"> 
 

 
\t \t \t \t <link href='//fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' /> 
 
\t \t <link href='https://fullcalendar.io/css/base.css?3.1.0-1.5.0-2' rel='stylesheet' /> 
 
\t \t <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' /> 
 

 
\t \t \t <script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script> 
 
\t <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
\t <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> 
 

 

 
<div id='calendar'></div>

来源

2016-12-24 09:44:12

如何在fullcalendar上添加businessHours

回答

相关问题