2015-12-14 3 views
6

Я хочу изменить размер события в fullcalendar с помощью meteorjs. Я хотел бы восстановить дату на входе, чтобы установить размер. Я пробовал так много вещей, как следующий код, но это не удалось.Метеор js и fullcalendar

Я хотел бы также форматировать дату в «dd-mm-yy».

Просьба также пояснить, как использовать роль alaning внутри моего js-файла, чтобы пользователь не имел событие click.

Благодарим за помощь.

Мой файл .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

Смежные вопросы