2015-12-14 17 views
6

meteorjを使ってfullcalendarでイベントのサイズを変更したいとします。私はサイズを設定する入力の日付を回復したいと思います。私は次のコードのように多くのことを試みましたが失敗しました。Meteor 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 
 
      } 
 
     }) 
 
     } 
 
    }) 
 
    }); 
 
}

あなたの助け

答えて

0

あなたは.preventDefault().stopPropagation()を使用してみましたもう一度Thxををお持ちですか?

+1

これはコメントです –

+0

私は同意します。私の36の評判でそれを行うことはできません。 –

0

いいえどこに投稿イベントとして表示されますか。event.preventDefault()は違いがありません。 Peddle Hawk BlogはFullCalendarの使用について書いています。もっと便利だと思います。How to add fullcalendar in meteor

+1

あなたの答えをさらに説明してください。あなたが余分な説明としてそれらを参照するとき、リンクは良いです。回答は完全性の機能でなければなりません。 – Media

関連する問題