javascript - meteor js 和全日历

Question

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

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

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

感谢您的帮助。

我的文件.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
          }
        })
      }
    })
  });
 }

再次感谢您的帮助

Answer 1

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