2015-12-14 208 views
6

我想用meteorjs在fullcalendar中調整事件大小。我想恢復輸入中的日期以設置大小。我嘗試了很多東西,比如下一個代碼,但失敗了。流星js和fullcalendar

我想在「dd-mm-yy」格式化日期。

另請解釋如何在我的js文件中使用alaning角色以防止用戶發生點擊事件。

感謝您的幫助。

我的.html文件:

<template name="planning"> 
 
\t {{#if isInRole 'view-projects,prof,admin'}} 
 
\t {{>dialog}} 
 
    <div class="container"> 
 
     <div id="calendar"> 
 
     </div> 
 
    </div> 
 
\t \t {{/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> 
 
\t \t <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> 
 
\t \t \t <a href="#" class="btn btn-primary updateTitle updateDateEnd">Save</a> 
 
\t \t \t <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 
 
      } 
 
     }) 
 
     } 
 
    }) 
 
    }); 
 
}

您的幫助

再次THX

回答

0

您是否嘗試過使用.preventDefault().stopPropagation()

+1

這應該是一個評論 –

+0

我同意。雖然我的36聲望不能這樣做。 –

0

沒有我在哪裏看到它作爲提交事件,所以event.preventDefault()應該沒有區別。 Peddle Hawk Blog寫了關於使用FullCalendar我希望它更有用:How to add fullcalendar in meteor

+1

請在你的回答中解釋更多。當你把它們作爲額外的解釋時,鏈接是好的。答案必須是完整性功能。 – Media