2016-03-09 30 views
0

我使用FullCalendar 2.6.1作爲外部插件(只需將目錄添加到帶有fullcalendar人員的myapp/client/)與Meteor 1.2.1。我也使用jquery-ui-1.11.4。在我的日曆中,我有一個奇怪的錯誤:我不能在月視圖中的第2周(有些時候是3或4周)之後將活動放到任何一天。而且我選擇哪個蒙太奇並不重要。 我有一個複製品。如果你想看到只需登錄用戶[email protected]和密碼111http://85.143.219.249:4000/login並打開日曆。Fullcalendar Meteor不能在第2個月的第一週內刪除事件

我也嘗試使用包rzymek:fullcalendar但存在相同的錯誤。

正如我記得我沒有與全版本的舊版本(2.2.0)這樣的錯誤。

這是我如何初始化日曆。 模板:

<template name="calendar"> 
<div class="content"> 
    {{#pageTitle title="Calendar" }}{{/pageTitle}} 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="hpanel"> 
         <div class="panel-body"> 
          <div id="external-events"> 
           <strong>Click, Drop or Resize event on calendar!</strong> 
           <p>Message from functions: 
            <br/> 
            <div id="external-events"> 
             <p>Drag a event and drop into callendar.</p> 
             {{#each workouts}} 
             <div class='external-event h-bg-green text-white' id={{this._id}}>{{workoutName}}</div> 
             {{/each}} 
            </div> 
           </p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-12"> 
      {{#panel title="Calendar"}} 
       <div id="calendar"></div> 
      {{/panel}} 
     </div> 
    </div> 
</div> 

和JS:

Template.calendar.onRendered(function() { 
    // Initialize i-check plugin 
    $('.i-checks').iCheck({ 
     checkboxClass: 'icheckbox_square-green', 
     radioClass: 'iradio_square-green' 
    }); 

    // Initialize the external events 
    $('#external-events div.external-event').each(function() { 

     // store data so the calendar knows to render an event upon drop 
     $(this).data('event', { 
      title: $.trim($(this).text()), // use the element's text as the event title 
      stick: true // maintain when user navigates (see docs on the renderEvent method) 
     }); 

     // make the event draggable using jQuery UI 
     $(this).draggable({ 
      zIndex: 1111999, 
      revert: true,  // will cause the event to go back to its 
      revertDuration: 0 // original position after the drag 
     }); 

    }); 

    // Re-rendering calendar events when collection changed 
    //var calendar = this.$('.fc'); 
    this.autorun(function() { 
     $('#calendar').fullCalendar('refetchEvents'); 
    }); 

    // Initialize the calendar 

    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'title', 
      right: 'today prev,next' 
     }, 
     lang: 'ru', 
     timezone: 'local', 
     fixedWeekCount: false, 
     editable: true, 
     droppable: true, 
     displayEventTime: false, 
     allDayDefault: true, 
     color: '#62cb31', 
     drop: function(date) { 
      var newCalendarEvent = {}; 
      newCalendarEvent.start = date.format(); 
      newCalendarEvent.eventSourceId = this.id; 
      newCalendarEvent.eventSourceType = 'workout'; 
      newCalendarEvent.title = $(this).text(); 
      newCalendarEvent.color = '#62cb31'; 
      Meteor.call('calendarEventAdd', newCalendarEvent); 
     }, 
     eventReceive: function(event) { 
      var calendarEventId = event._id; 
      var calendarEventDate = event.start.format(); 
      var calendarEventName = event.title; 
      var calendarEventColor = '#62cb31'; 
      //Meteor.call('calendarEventAdd', calendarEventDate, calendarEventId, calendarEventName, calendarEventColor); 
      //console.log(calendarEventDate); 
     }, 
     events: function(start, end, timezone, callback) { 
      var calendarEvents = []; 
      _.each(Calendar.find({}, {fields: {start: 1, title: 1, color: 1}}).fetch(), function(value, key, list) { 
       calendarEvents.push(value); 
      }); 
      callback(calendarEvents); 
     }, 
     eventDragStart: function(event, jsEvent, ui, view) { 
      $(this).qtip().hide(); 
     }, 
     eventDrop: function(event, delta) { 
      var eventId = event._id; 
      var newEventDate = event.start.format(); 
      console.log(event); 
      console.log(delta); 
      Meteor.call('calendarEventUpdate', eventId, newEventDate); 
     }, 
     eventRender: function(event, element) { 
      $(element).css({backgroundColor: '#62cb31', borderColor: '#62cb31'}); 
      var content = '<button class="btn btn-xs btn-default delCalendarEvent" id="' + event._id + '"><i class="fa fa-trash"></i></button>'; 
      element.qtip({ 
       show: { 
        event: 'click', 
        solo: true 
       }, 
       hide: { 
        event: 'click unfocus' 
       }, 
       content: content, 
       style: { 
        classes: 'qtip-bootstrap' 
       }, 
       position: { 
        my: 'bottom center', 
        at: 'top center', 
        container: element 
       } 
      }); 
     } 
    }); 

}); 
Template.calendar.events({ 
    'click .delCalendarEvent': function(event, template) { 
     var eventId = event.currentTarget.id; 
     var calendar = template.$('.fc'); 
     //Meteor.call('calendarEventDel', eventId); 
     Meteor.call('calendarEventDel', eventId, function(error, result) { 
      if (error) { 
       console.log(error); 
      } else { 
       calendar.fullCalendar('removeEvents', eventId); 
      } 
     }); 
    } 
}); 

回答

0

我也有這個問題,並認爲它是由父容器是100%的高度引起的。我注意到,不允許拖動的星期行不在我頁面加載時的初始視圖中。我的身體標記被設置爲100%的高度,在查看瀏覽器開發工具之後,看起來更像是100的視圖高度。刪除它工作正常。如果您遇到同樣的問題,我會打開開發工具,向下滾動,然後瀏覽任何父母的不同標籤,以查看哪些標籤在同一點上看起來被切斷,您無法拖動您的事件。

0

這段代碼適合我。 嘗試把它添加到CSS文件:

body .fc {

overflow:auto;

}

相關問題