fullcalendar slotDuration

私は午前9時30分から午後6時30分までの時間を30分の時間間隔で表示しようとしています。This question on SOは私にとっては十分だったはずですが、私はそれをやった方法を完全に私のfullcalendarから削除される。.. はここfullcalendarfullcalendar slotDuration

ここ


 

 
var dateByColumn = 2; 
 

 
$(document).ready(function() { 
 

 
    $('#calendar').fullCalendar({ 
 
     //weekends: false, 
 
     //selectable: true, 
 
     hiddenDays: [ 0, 6 ], 
 
     theme: true, 
 
     header: { 
 
      left: 'prev,next', 
 
      center: 'title', 
 
      right: '' 
 
     }, 
 
     defaultView: 'agendaWeek', 
 

 

 
     viewRender: function(view, $element) 
 
     { 
 
      $element.find('.fc-event-container').each(function() { 
 

 

 
       var $this = $(this); 
 
       var now = new Date("2016-09-09T09:30:00+05:00"); 
 
       if(!$this.hasClass('fc-helper-container')) 
 
       { 
 

 
        //2 : moday, 3:Tue, 4:Wed, 5:Thu, 6:Fri 
 

 
        for(var i = 0;i<16;i++) 
 
        { 
 
         var thisDate = $(".fc-day-header:nth-child("+dateByColumn+")").attr('data-date'); 
 
         var hours = now.getHours(); 
 
         hours = ('0' + hours).slice(-2); 
 
         var min = (now.getMinutes() == 0)?"00":now.getMinutes(); 
 
         var sec = (now.getSeconds() == 0)?"00":now.getSeconds(); 
 
         var time = hours+":"+min+":"+sec; 
 
         var id = thisDate+"T"+time; 
 
         $(this).append('<div class="book" data-date="'+thisDate+'" data-time="'+time+'" id="'+id+'"><a> Book </a></div>'); 
 
         now.setMinutes(now.getMinutes() + 30); 
 
        } 
 
        dateByColumn++; 
 
        if(dateByColumn >= 7){ 
 
         dateByColumn = 2; 
 
        } 
 

 

 
       } 
 

 

 
      }); 
 

 

 

 
     }, 
 

 
     minTime: '09:30:00', 
 
     maxTime: '17:30:00', 
 
     slotDuration: "00:30:01", 
 
     editable: false , 
 
     allDaySlot: false, 
 
     eventLimit: true, // allow "more" link when too many events 
 
     events: { 
 
      url: 'JSON/events_json.php' 
 
     } 
 

 

 

 
    }); 
 
    $('body').on('click','.book',function(){ 
 
     var id = this.id; 
 
     var end = new Date(id); 
 
     end = end.setMinutes(end.getMinutes() + 30); 
 
     var eventData = { 
 
      title: "Taken", 
 
      start: this.id, 
 
      end: end 
 
     }; 
 
     $('#calendar').fullCalendar('renderEvent', eventData, true);});});

<!DOCTYPE html> 
 
<html> 
 
    <head lang="en"> 
 
     <meta charset="UTF-8"> 
 
     <title>Full Calendar</title> 
 
     <link rel='stylesheet' href='http://localhost/fullcalendar/fullcalendar.css' /> 
 
     <link rel="stylesheet" href="http://localhost/fullcalendar/lib/cupertino/jquery-ui.min.css"> 
 

 
     <script src='http://localhost/fullcalendar/lib/jquery.min.js'></script> 
 
     <script src='http://localhost/fullcalendar/lib/moment.min.js'></script> 
 
     <script src='http://localhost/fullcalendar/fullcalendar.js'></script> 
 
     <script src='http://localhost/fullcalendar/lib/jquery-ui.min.js'></script> 
 

 
    </head> 
 
    <body> 
 
     <div id='calendar'></div> 
 
    </body> 
 
</html>

出典

2016-09-16 umair.ashfr

ための私のコードであり、これはただの周りの仕事ではなく、実際のソリューションですが、それが正常に動作します私のために..

$('tr.fc-minor').each(function(){ // takes the date-time attr for this class 
 
    var time = $(this).attr('data-time'); // your input string 
 
    var a = time.split(':'); // split it at the colons 
 
    var seconds = a[0]+":"+a[1]; 
 

 
    console.log(seconds); 
 
    $(this).find('.fc-time').html(seconds); 
 
});

出典

2016-09-16 12:36:07

答えて

関連する問題