Meteor js 和 fullcalendar

Posted 2023-03-08

【中文标题】Meteor js 和 fullcalendar

【英文标题】：Meteor js and fullcalendar

【发布时间】：2016-03-20 05:49:14

【问题描述】：

我想用meteorjs 调整全日历事件的大小。我想恢复输入中的日期以设置大小。我尝试了很多东西，比如下一个代码，但都失败了。

我也想用“dd-mm-yy”格式化日期。

还请说明如何在我的js文件中使用alaning角色来防止用户发生点击事件。

感谢您的帮助。

我的文件 .html：

<template name="planning">
	#if isInRole 'view-projects,prof,admin'
	>dialog
    <div class="container">
      <div id="calendar">
      </div>
    </div>
		/if
</template>
<template name="dialog">
<div class="modal" id="EditEventModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close closeDialog" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="">Modification evenment</h4>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="title">Nom du projet</label>
        <input type="text" class="form-control" id="title" placeholder="" value="title">
      </div>
    </div>
		<form class="form-inline" role="form">
    <div class="form-group">
      <label for="dateSart">Début:</label>
      <input type="text" name="anniversaire" class="form-control" id="dateStart" placeholder="" value="start">
    </div>
    <div id="rightDateEnd" class="form-group">
      <label for="dateEnd">Fin:</label>
      <input type="text" name="anniversaire" class="form-control" id="end" placeholder="" value="end">
    </div>
  </form>
    <div class="modal-footer">
      <a href="#" class="btn btn-danger remove">Delete</a>
			<a href="#" class="btn btn-primary updateTitle updateDateEnd">Save</a>
			<button type="button" class="btn btn-default closeDialog" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>
</div>
</template>

我的文件 client.js：

  Template.dialog.events(
    "click .closeDialog": function(event, template)
      Session.set('editing_event', null);
    ,
    "click .updateTitle":function(evt, tmpl)
      var title = tmpl.find('#title').value;
      Meteor.call('updateTitle', Session.get('editing_event'),title);
      Session.set('editing_event', null);
      $('#EditEventModal').modal("hide");
    ,
    "click .remove":function(evt, tmpl)
      Meteor.call('removeCalEvent', Session.get('editing_event'));
      Session.set('editing_event', null);
      $('#EditEventModal').modal("hide");
    ,
    "click .updateStart":function(evt, tmpl)
      var start = tmpl.find('#start').value;
      Meteor.call('updateStart', Session.get('editing_event'),start);
      Session.set('editing_event',null);
    ,
    "click .updateEnd":function(evt, tmpl)
      var end = tmpl.find('#end').value;
      Meteor.call('updateEnd', Session.get('editing_event'),end);
      Session.set('editing_event',null);
    
  );
  Template.planning.helpers(
    editing_event:function()
    
      return Session.get('editing_event');
    
  );
  Template.dialog.helpers(
    title:function()
      var ce = CalEvent.findOne(_id:Session.get('editing_event'));
      return ce.title;
    ,
    start:function()
      var ce = CalEvent.findOne(_id:Session.get('editing_event'));
      return ce.end;
    ,
    end:function()
      var cend = CalEvent.findOne(_id:Session.get('editing_event'));
      return cend.end;
    
  );


  Template.dialog.rendered = function()
  
    if(Session.get('editDialog'))
    
      var calevent = CalEvent.findOne(_id:Session.get('editDialog'));
      if(calevent)
      
        $('#title').val(calevent.title);
        $('#start').val(calevent).start;
        $('#end').val(calevent).end;
      
    
    $('#end').datepicker();
    $('#dateStart').datepicker();
  

  Template.planning.rendered = function()
  
    var calendar = $('#calendar').fullCalendar(
      dayClick:function(date, allDay, jsEvent, view)
        var calendarEvent = ;
        calendarEvent.start = date;
        calendarEvent.end = date;
        calendarEvent.title = 'Nouveau Projet';
        calendarEvent.owner = Meteor.userId();
        Meteor.call('saveCalEvent', calendarEvent);
      ,
      eventClick:function(calEvent, jsEvent, view)
        Session.set('editing_event',calEvent._id);
        $('title').val(calEvent.title);
        $('#EditEventModal').modal("show");
      ,
      eventDrop:function(reqEvent)
        Meteor.call('moveEvent', reqEvent);
      ,
      events:function(start, end, callback)
        var calEvents = CalEvent.find(, reactive:false).fetch();
        callback(calEvents);
      ,
      editable:true,
      selectable: true
      formatDate:
    ).data().fullCalendar;
    Deps.autorun(function()
      CalEvent.find().fetch();
      if(calendar)
        calendar.refetchEvents();
      
    )
  

我的文件 server.js：

 if (Meteor.isServer) 
  Meteor.startup(function ()
  
    Meteor.methods(
      'saveCalEvent':function(ce)
      
        CalEvent.insert(ce);
      ,
      'updateTitle':function(id,title)
        return CalEvent.update(_id:id,$set:title:title);
      ,
      'removeCalEvent':function(id,tittle)
        return CalEvent.remove(_id:id);
      ,
      'updateStart':function(id,start)
        return CalEvent.update(_id:id,$set:start:start);
      ,
      'updateEnd':function(id,end)
        return CalEvent.update(_id:id,$set:end:end);
      ,
      'moveEvent':function(reqEvent)
        return CalEvent.update(_id:reqEvent._id,
          $set:
            start:reqEvent.start,
            end:reqEvent.end
          
        )
      
    )
  );
 

再次感谢您的帮助

【参考方案1】：

您尝试过使用.preventDefault() 和.stopPropagation() 吗？

【讨论】：

这应该是一条评论

我同意。不过，我的 36 声望无法做到这一点。

【参考方案2】：

不，我在哪里将其视为提交事件，因此 event.preventDefault() 不应该有所作为。 Peddle Hawk Blog 写了关于使用 FullCalendar 我希望它更有用：How to add fullcalendar in meteor

【讨论】：

请在您的回答中解释更多。当您将它们称为额外解释时，链接很好。答案必须是完整性特征。