流星和全日历包：我无法向日历添加事件

Question

As explained in my previous thread , I'm following a Meteor tutorial and learning to do a calendar app. 正如我之前的主题所述，我正在关注Meteor教程并学习制作日历应用程序。

Edit: corrected a few mistakes, plus I made a separate file for the collection called calevents.js, which is placed in a collections folder. 编辑：更正了一些错误，另外，我为集合calcals.js创建了一个单独的文件，该文件放置在collections文件夹中。

I can add events, but the pop-up window won't show so I can't give them a new name. 我可以添加事件，但是不会显示弹出窗口，因此无法给它们起新的名字。 As this doesn't happen, the new event won't show either. 由于这不会发生，因此新事件也不会显示。 For me to see the events, I have to refresh manually. 为了让我看到事件，我必须手动刷新。 On edit: I can rename the event but it won't change when I click on Save. 编辑时：我可以重命名事件，但是单击“保存”后它不会更改。

Here is my code so far: 到目前为止，这是我的代码：

demonstration.js: 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: 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: home.html：

<template name="home">
  <div class="hero-unit">
    <h1>Calendar app</h1>
    <p>Manage your calendar</p>
  </div>
</template>

demonstration.html: demo.html：

<head>
  <title>Calendar app</title>
</head>

<body>
  {{>menu}}
    <div class="container-fluid">
        <div class="row-fluid"> 
            {{renderPage}}
        </div>
    </div>
</body>

I have also downloaded the code from the website given on the tutorial, uploaded it to my Nitrous box, but it doesn't work either. 我还从教程中提供的网站上下载了代码，并将其上传到了Nitrous框中，但是它也不起作用。 At first I thought that it was something about Nitrous, but it could be something about the Meteor version and unfortunately I don't know enough to find the problem. 起初我以为是Nitrous的事，但可能是Meteor版本的事，不幸的是，我对问题的了解还不够。

The other threads about something related to fullcalendar don't address my problem, but if you think they do, please point me in the right direction. 与全日历相关的其他主题无法解决我的问题，但是如果您认为有帮助，请向我指出正确的方向。 I have also looked at the API of the package, but I'm clueless. 我也查看了该包的API，但我一无所知。 Does anyone have any ideas? 有人有什么想法吗？

Many thanks in advance. 提前谢谢了。

Answer 1

Make sure you add events that correspond to the appropriate template. 确保添加与相应模板对应的事件。

For example: 例如：

Template.calendar.events({
  'click .css-class-name': function(){
     //do something on click
     console.log("click event fired");
   },
});

This will trigger an event on click of any HTML element with a class = "css-class-name", but only for elements within the calendar template. 单击具有class =“ css-class-name”的任何HTML元素时，这将触发事件，但仅适用于日历模板中的元素。

If you're trying to trigger an event in the "editevent" template, then you would need to make sure you do: 如果您尝试触发“ editevent”模板中的事件，则需要确保执行以下操作：

Template.editevent.events({
  'click .css-class-name': function(){
     //do something on click
     console.log("click event fired");
   },
});

Hope this helps! 希望这可以帮助！

Answer 2

There are a few things here to get it up and running. 这里有一些事情可以启动和运行。 First of all the editevent template is never used. 首先，永远不会使用editevent模板。 You should render it using the {{> editevent}} tag in the appropriate place in the HTML (I assume that the calendar template would be a suitable place). 您应该在HTML的适当位置使用{{> editevent}}标签进行渲染（我认为calendar模板将是适当的位置）。

Also, you are now initiating the fullCalendar package in your Template.calendar.rendered function. 另外，您现在fullCalendar在Template.calendar.rendered函数中启动fullCalendar包。 That's great. 那很棒。 But you must also catch the click events to update the events. 但是，您还必须捕获单击事件以更新事件。 Here's how they do it in the tutorial source code: 他们在教程源代码中的操作方法如下：

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

The code above would catch all click events in the editEvents template on any element with the class save . 上面的代码将捕获类为save任何元素的editEvents模板中的所有click事件。

You are also referencing evt in your template, but that is not defined in your JavaScript code. 您还在模板中引用了evt ，但是未在JavaScript代码中定义。 This is the corresponding code from the tutorial to populate evt . 这是本教程中用于填充evt的相应代码。

Template.editEvent.evt = function(){
    var calEvent = CalEvents.findOne({_id:Session.get('editing_calevent')});
    return calEvent
}

Good luck! 祝好运！

Answer 3

Did you already resolve this issue? 您已经解决了这个问题吗？ If yes, please let us know what the cause exactly was? 如果是，请告诉我们确切原因是什么？

My guess is, that this has little to do with the editevent. 我的猜测是，这与editevent无关。 I think it has to do with the insert command. 我认为这与insert命令有关。 Trying to reproduce your case, I encountered an error: "insert failed: method not found". 试图重现您的情况，我遇到了一个错误：“插入失败：找不到方法”。 So I am guessing your insert is not working. 因此，我猜测您的插入内容无效。

Probably, you only have declared the collection in the client side code. 可能您只在客户端代码中声明了该集合。 So, if you add a server.js file and add to that: CalEvents = new Meteor.Collection('calevents'); 因此，如果您添加server.js文件并添加到其中： CalEvents = new Meteor.Collection('calevents'); Than your collection will be declared to the server side as well, allowing the server to process it. 比您的集合也将被声明到服务器端，从而允许服务器对其进行处理。

Best regards, 最好的祝福，

Answer 4

Also, the problem could be that you are trying to run Bootstrap-2 coding (that's what is in the tutorial!) where you have (maybe) installed Bootstrap-3 on your Meteor application. 另外，问题可能是您正在尝试运行Bootstrap-2编码（这就是本教程中的内容！），您已经在Meteor应用程序上（可能）安装了Bootstrap-3。

The modal in the EditEvent template in that case won't work since it's coding has changed completely in Bootstrap-3. 在那种情况下，EditEvent模板中的模态将不起作用，因为它的编码已在Bootstrap-3中完全更改。

Check what version of Bootstrap you have installed in your application by maneuvering to it in the console and run: meteor list --using 通过在控制台中进行操作来检查您在应用程序中安装的Bootstrap版本，然后运行：meteor list --using

You can eliminate the cause of your problem in various ways. 您可以通过多种方式消除造成问题的原因。 If you put a simple text in your template EditEvent above the dialog, you can see if this shows on clicking an event. 如果在对话框上方的模板EditEvent中放置简单文本，则可以查看单击事件是否显示。 You then know, that the problem lies in the modal. 然后，您就会知道问题出在模态上。

Answer 5

Try changing 尝试改变
updateCalEvent(Session.get('editingCalEvent'), $("#title").val()); updateCalEvent（Session.get（'editingCalEvent'），$（“＃title”）。val（））;
To... 至...
updateCalEvent(Session.get('editingCalEvent'), tmpl.find('#title').value); updateCalEvent（Session.get（'editingCalEvent'），tmpl.find（'＃title'）。value）;

流星和全日历包：我无法向日历添加事件

问题描述

5 个解决方案

解决方案1
0 2014-04-16 22:11:47

解决方案2
0 2014-04-17 18:48:09

解决方案3
0 2014-05-05 15:03:53

解决方案4
0 2014-05-07 07:48:29

解决方案5
0 2014-05-07 14:50:07

流星和全日历包：我无法向日历添加事件

问题描述

5 个解决方案

解决方案1 0 2014-04-16 22:11:47

解决方案2 0 2014-04-17 18:48:09

解决方案3 0 2014-05-05 15:03:53

解决方案4 0 2014-05-07 07:48:29

解决方案5 0 2014-05-07 14:50:07

解决方案1
0 2014-04-16 22:11:47

解决方案2
0 2014-04-17 18:48:09

解决方案3
0 2014-05-05 15:03:53

解决方案4
0 2014-05-07 07:48:29

解决方案5
0 2014-05-07 14:50:07