带模态和多个事件详细信息的完整日历 - 流星

时间:2015-10-14 03:57:50

标签: javascript json mongodb meteor

我正在使用FullCalendar软件包以及以下完美运行的代码:

HTML:

<body>
{{>calendar}}
</body>

</template>

<template name="calendar">

{{#if showEditEvent}}
{{>editEvent}}
{{/if}}



<div class="container">
        <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-8">
                <div id="calendar">

                </div>
            </div>
            <div class="col-md-2">
            </div>
        </div>
</div>

</template>



<template name="editEvent">



<!--Modal Dialog-->
<div class="modal" id="EditEventModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-  hidden="true">x</button>
        <h4 class="modal-title">Agenda Item</h4>
      </div>
      <div class="modal-body">
        <label for="title">Item: </label><input type="text" class="title"     name="title" value="{{evt.title}}" id="title">
      </div>
      <div class="modal-footer">
        <a href="#" class="btn btn-danger remove">Delete</a>
        <a href="#" class="btn btn-primary save">Save</a>
        <a href="#" class="btn close" data-dismiss="modal">Cancel</a>
      </div>
    </div>
  </div>
</div>

JS:

// Set session defaults
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);

Template.calendar.showEditEvent = function(){
return Session.get('showEditEvent');
}

Template.editEvent.evt = function(){
// run a query to the database
var calEvent = CalEvents.findOne({_id:Session.get('editing_calevent')});
return calEvent;
}

var updateCalendar = function(){
$('#calendar').fullCalendar( 'refetchEvents' );
}


Template.editEvent.events({
'click .save':function(evt,tmpl)
{updateCalEvent(Session.get('editing_calevent'),tmpl.find('.title').value);
    Session.set('editing_calevent',null);
    Session.set('showEditEvent',false);
    },
'click .close':function(evt,tmpl){
    Session.set('editing_calevent',null);
    Session.set('showEditEvent',false);
    $('#EditEventModal').modal("hide");
}   ,
'click .remove':function(evt,tmpl){
    removeCalEvent(Session.get('editing_calevent'));
    Session.set('editing_calevent',null);
    Session.set('showEditEvent',false);
    $('#EditEventModal').modal("hide");
}
})


Template.calendar.rendered = function(){
$('#calendar').fullCalendar({
    header:{
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    // Event triggered when someone clicks on a day in the calendar
    dayClick:function( date, allDay, jsEvent, view) {
        // Insert the day someone's clicked on
        CalEvents.insert({title:'New Item',start:date,end:date});
        // Refreshes the calendar
        updateCalendar();
    },
    eventClick:function(calEvent,jsEvent,view){
        // Set the editing_calevent variable to equal the calEvent.id
        Session.set('editing_calevent',calEvent.id);
        // Set the showEditEvent variable to true
        Session.set('showEditEvent', true);

        $('#EditEventModal').modal("show");
    },
    eventDrop:function(calEvent){
        CalEvents.update(calEvent.id, 
{$set:  {start:calEvent.start,end:calEvent.end}});
        updateCalendar();
    },
    events: function(start, end, callback) {
        // Create an empty array to store the events
        var events = [];
        // Variable to pass events to the calendar
        // Gets us all of the calendar events and puts them in the array
        calEvents = CalEvents.find();
        // Do a for each loop and add what you find to events array
        calEvents.forEach(function(evt){
            events.push(
{        id:evt._id,title:evt.title,start:evt.start,end:evt.end});
        })

        // Callback to pass events back to the calendar
        callback(events);
    },
    editable:true
});
}  
var removeCalEvent = function(id,title){
CalEvents.remove({_id:id});
updateCalendar();
}
var updateCalEvent = function(id,title){
CalEvents.update(id, {$set: {title:title}});
updateCalendar();
}

我的两个问题是:

A)我如何整合类似下面的东西,以便在JSON Feed中有多个自定义字段?

B)如何将结果数据存储在新的Mongo Collection中?

$(document).ready(function() { 
$('#bootstrapModalFullCalendar').fullCalendar({
events: '/hackyjson/cal/',
header: {
left: '',
center: 'prev title next',
right: ''
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
}
});
});

谢谢。

0 个答案:

没有答案