Geek Answers Handbook

Meteor js and fullcalendar

I want to resize an event in fullcalendar using meteorjs. I would like to restore the input date to set the size. I tried as many things as the following code, but it failed.

I would also like to format the date in "dd-mm-yy".

Also explain how to use the alaning role inside my js file so that the user does not have a click event.

Thank you for your help.

My .html file:

<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>

my file 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(); } }) }

my file 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 } }) } }) }); }

thanks again for your help

+6
source share
2 answers

Have you tried using .preventDefault() and .stopPropagation() ?

0
source

No, where I see this as a send event, so event.preventDefault() should not matter. The Peddle Hawk blog has written about using FullCalendar. I hope this will be more useful: How to add fullcalendar to a meteorite

0
source

More articles:


All Articles