流星和全日歷包：我無法向日歷添加事件
[英]Meteor and fullcalendar package: I can't add events to my calendar
問題描述
正如我之前的主題所述 ，我正在關注Meteor教程並學習制作日歷應用程序。
編輯：更正了一些錯誤，另外，我為集合calcals.js創建了一個單獨的文件，該文件放置在collections文件夾中。
我可以添加事件，但是不會顯示彈出窗口，因此無法給它們起新的名字。 由於這不會發生，因此新事件也不會顯示。 為了讓我看到事件，我必須手動刷新。 編輯時：我可以重命名事件，但是單擊“保存”后它不會更改。
到目前為止，這是我的代碼：
demo.js：
Session.setDefault('editingCalEvent', null);
Session.setDefault('showEditEvent', false);
Session.setDefault('lastMod', null);
Router.map(function () {
this.route('home', {
path: '/'
});
this.route('calendar', {
path: '/calendar'
});
});
Template.calendar.showEditEvent = function() {
return Session.get('showEditEvent');
}
Template.editevent.evt = function() {
var calEvent = CalEvents.findOne({_id:Session.get('editingCalEvent')});
return calEvent;
}
Template.editevent.events({
'click .save': function() {
console.log("update 123, ¿pasó por aquí?");
updateCalEvent(Session.get('editingCalEvent'), $("#title").val());
Session.set('editingCalEvent', null);
Session.set('showEditEvent',false);
Session.set('lastMod',new Date());
}
})
Template.calendar.rendered = function() {
$('#calendar').fullCalendar({
dayClick:function(date, allDay, jsEvent, view) {
//console.log("insertando...", date);
CalEvents.insert({title: 'New Event', start: date, end: date});
Session.set('lastMod',new Date());
},
eventClick:function(calEvent,jsEvent,view) {
Session.set('editingCalEvent', calEvent.id);
Session.set('showEditEvent', true);
},
eventDrop:function(calEvent) {
CalEvents.update(calEvent.id, {$set: {start:calEvent.start,end:calEvent.end}});
Session.set('lastMod',new Date());
},
events: function(start, end, callback) {
var events = [];
calEvents = CalEvents.find();
calEvents.forEach(function(evt) {
events.push({
id: evt._id,
title: evt.title,
start: evt.start,
end: evt.end
});
});
callback(events);
},
editable:true
});
}
Template.calendar.lastMod = function() {
return Session.get('lastMod');
}
var updateCalEvent = function(id, title) {
CalEvents.update(id, {$set: {title:title}});
return true;
}
calendar.html：
<template name="calendar">
{{#if showEditEvent}}
{{ >editevent}}
{{/if}}
<input type="hidden" name="lastMod" value="{{lastMod}}" id="lastMod">
<div id="calendar">
</div>
</template>
<template name="editevent">
<div id="example" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Edit event</h3>
</div>
<div class="modal-body">
<label for="title">Event:</label>
<input type="text" name="title" id="title" value="{{evt.title}}">
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success save">Save</a>
<a href="#" class="btn cancel" data-dismiss="modal">Cancel</a>
</div>
</div>
</template>
home.html：
<template name="home">
<div class="hero-unit">
<h1>Calendar app</h1>
<p>Manage your calendar</p>
</div>
</template>
demo.html：
<head>
<title>Calendar app</title>
</head>
<body>
{{>menu}}
<div class="container-fluid">
<div class="row-fluid">
{{renderPage}}
</div>
</div>
</body>
我還從教程中提供的網站上下載了代碼，並將其上傳到了Nitrous框中，但是它也不起作用。 起初我以為是Nitrous的事，但可能是Meteor版本的事，不幸的是，我對問題的了解還不夠。
與全日歷相關的其他主題無法解決我的問題，但是如果您認為有幫助，請向我指出正確的方向。 我也查看了該包的API，但我一無所知。 有人有什么想法嗎？
提前謝謝了。
5 個解決方案
解決方案1
0 2014-04-16 22:11:47
確保添加與相應模板對應的事件。
例如：
Template.calendar.events({
'click .css-class-name': function(){
//do something on click
console.log("click event fired");
},
});
單擊具有class =“ css-class-name”的任何HTML元素時，這將觸發事件，但僅適用於日歷模板中的元素。
如果您嘗試觸發“ editevent”模板中的事件，則需要確保執行以下操作：
Template.editevent.events({
'click .css-class-name': function(){
//do something on click
console.log("click event fired");
},
});
希望這可以幫助！
解決方案2
0 2014-04-17 18:48:09
這里有一些事情可以啟動和運行。 首先，永遠不會使用editevent模板。 您應該在HTML的適當位置使用{{> editevent}}標簽進行渲染（我認為calendar模板將是適當的位置）。
另外，您現在fullCalendar在Template.calendar.rendered函數中啟動fullCalendar包。 那很棒。 但是，您還必須捕獲單擊事件以更新事件。 他們在教程源代碼中的操作方法如下：
Template.editEvent.events({
'click .save':function(evt,tmpl){
updateCalEvent(Session.get('editing_calevent'),tmpl.find('.title').value);
Session.set('editing_event',null);
Session.set('showEditEvent',false);
Session.set('lastMod',new Date());
}
})
上面的代碼將捕獲類為save任何元素的editEvents模板中的所有click事件。
您還在模板中引用了evt ，但是未在JavaScript代碼中定義。 這是本教程中用於填充evt的相應代碼。
Template.editEvent.evt = function(){
var calEvent = CalEvents.findOne({_id:Session.get('editing_calevent')});
return calEvent
}
祝好運！
解決方案3
0 2014-05-05 15:03:53
您已經解決了這個問題嗎？ 如果是，請告訴我們確切原因是什么？
我的猜測是，這與editevent無關。 我認為這與insert命令有關。 試圖重現您的情況，我遇到了一個錯誤：“插入失敗：找不到方法”。 因此，我猜測您的插入內容無效。
可能您只在客戶端代碼中聲明了該集合。 因此，如果您添加server.js文件並添加到其中： CalEvents = new Meteor.Collection('calevents'); 比您的集合也將被聲明到服務器端，從而允許服務器對其進行處理。
最好的祝福，
解決方案4
0 2014-05-07 07:48:29
另外，問題可能是您正在嘗試運行Bootstrap-2編碼（這就是本教程中的內容！），您已經在Meteor應用程序上（可能）安裝了Bootstrap-3。
在那種情況下，EditEvent模板中的模態將不起作用，因為它的編碼已在Bootstrap-3中完全更改。
通過在控制台中進行操作來檢查您在應用程序中安裝的Bootstrap版本，然后運行：meteor list --using
您可以通過多種方式消除造成問題的原因。 如果在對話框上方的模板EditEvent中放置簡單文本，則可以查看單擊事件是否顯示。 然后，您就會知道問題出在模態上。
解決方案5
0 2014-05-07 14:50:07
嘗試改變
updateCalEvent（Session.get（'editingCalEvent'），$（“＃title”）。val（））;
至...
updateCalEvent（Session.get（'editingCalEvent'），tmpl.find（'＃title'）。value）;
當我添加用於向日歷顯示事件的腳本時，事件下降在全日歷上不起作用
[英]Drop of events not working on fullcalendar when I add a script for showing events to the calendar
日歷完全加載后，如何在全日歷上呈現事件？
[英]How can I render events on fullcalendar after the calendar has been loaded completely?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.