Full Calendar Modal with Multiple Event details


#1

Hi,

I’m using the FullCalendar package as well as the below code which is working perfectly:

HTML:

   <body>
{{>calendar}}
</body>
{{#if showEditEvent}}
{{>editEvent}}
{{/if}}

<!--Sees to it, that everytime something is entered the calendar gets re rendered automatically-->

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

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

// If something with a class of .save in the editEvent template is clicked, run this function
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”);
}
})

// Fullcalendar package
// As soon as the calendar renders, it has to execute this function
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);
//Trigger the modal bootstrap 3 box as defined in the calendar.html page
$(’#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();
}

My two part question is:

A) how do i integrate something like the below in order to have more than one custom fields in the JSON feed?

B) how do I store the resultant data in a new 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();
}
});
});

Thank you.


#2

do you have a version of this setup in MeteorPad so as to reproduce? Even if with static events.