We Keep Coding

FullCalendar event ID - how to get it for deletion of events in with Laravel?

So, I'm working on a calendar app and I'm using Laravel and FullCalendar for this.
I want to be able to delete an event - once I click on the event in the calendar, a modal popup show up with a delete button. In order to delete the event, I must know its ID, but I can't get.
I can get it via JS selectors and display it as a text, but I can't figure out how to get it as a PHP variable so that I could use it in the action parameter of the form.
The reason why I'm doing this in the way I did it is: If I get all the events and "foreach" them into the "events" array of FullCalendar, my source code when the calendar renders would be a mess, full of events and their details. By using this approach, I find that events are not displayed in the source and the page renders more quickly (but I might be mistaken).
The way I display events from the database is as follows:
EventsController
public function getEvents()
{
return Event::where('event_date', '>', '2022-01-01')
->join('hospitals', 'events.hospital_id', '=', 'hospitals.hospital_id')
->select('hospitals.hospital_color', 'hospitals.hospital_max_people', 'event_id', 'event_content', 'event_date', 'user_id')
->get()
->map(fn ($events) => [
'id' => $events->event_id,
'title' => $events->event_content,
'start' => $events->event_date,
'allDay' => true,
'editable' => false,
'backgroundColor' => $events->hospital_color,
'borderColor' => $events->hospital_color,
'hospital_max_people' => $events->hospital_max_people,
'volunteer' => User::find($events->user_id)->first_name .' '. User::find($events->user_id)->last_name
]);
}
Events blade template - FullCalendar settings:
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
editable: false,
droppable: true,
selectable: true,
initialView: 'dayGridWeek',
views: {
dayGridWeek: {
type: 'dayGridWeek',
duration: { weeks: 2 },
buttonText: '4 day'
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
themeSystem: 'bootstrap5',
locale: 'en',
firstDay: '1',
contentHeight: 500,
height: 700,
expandRows: true,
events: 'getEvents',
eventClick: function(calendar, jsEvent, view) {
$('#eventDetail').modal("show");
$('#id').html(calendar.event.id);
$('#title').html(calendar.event.title);
$('#start').html(moment(calendar.event.start).format('DD.MM.YYYY'));
$('#volunteer').html(calendar.event.extendedProps.volunteer);
}
});
calendar.render();
});
</script>
Events blade template for showing modal:
<div class="modal fade" id="eventDetail" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="bar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Event details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Start: <p id="start"></p>
Volunteer: <p id="volunteer"></p>
Title: <p id="title"></p>
</div>
<div class="modal-footer">
<form method="POST" action="{{ route('calendar.destroy') }}" class="needs-validation" novalidate=""></p>
#csrf
#method('DELETE')
<div class="form-group">
<x-button tabindex="3">
{{ __('Delete event') }}
</x-button>
</div>
</form>
</div>
</div>
</div>
</div>

So, I did it in anoter way; just wanted to post the answer - I added a hidden input field: <input type="hidden" name="id" id="id" value=""> and the value is filled out when a modal opens with addition of this to the original id selector: $('#id').html(calendar.event.id).attr('value', calendar.event.id);
I also had to alter my delete route: Route::DELETE('calendar/destroy/{event_id}'
And that's it. Thank you anyway for your help

How can I bind an array object to FullCalendar events?

Vue.component('full-calendar', {
template: '<div ref="calendar"></div>',
props: {
tasks: {
type: Array,
required: true
},
newtask: Object
},
watch: {
tasks: function (task) {
// this.tasks.push(task);
// this.cal.calendar.addEvent({
// title: task.title,
// start: task.start,
// end: task.end
// });
$("#addTaskModal").modal('hide');
}},
data () {
return {
cal: null
}
},
methods: {
init:function(){
var self = this;
self.cal = $(self.$refs.calendar);
var args = {
firstDay: 1,
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'addTaskButton / dayGridMonth,timeGridWeek,listMonth'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
plugins: ["interaction", "dayGrid"],
eventLimit: true,
events: this.tasks,
dateClick: function(date)
{
self.$emit('date_clicked', date);
console.log('date clicked');
console.log(this);
},
eventClick: function(event)
{
self.$emit('event_clicked', event);
},
customButtons: {
addTaskButton: {
text: 'Add Task',
click: function() {
$("#addTaskModal").modal('show');
}
}
}
}
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$emit('event::resized', event);
}
args.eventDrop = function(event)
{
self.$emit('event::dropped', event);
}
}
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$emit('event::received', event);
}
}
self.cal.calendar = new FullCalendar.Calendar(self.$el,args);
self.cal.calendar.render();
}
},
mounted () {
this.init();
}
})
let vm = new Vue({
el: '#app',
data () {
return {
tasks: [
{
title: 'Event1',
start: '2019-05-10 12:30:00',
end: '2019-05-10 16:30:00'
},
{
title: 'Event2',
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
}
],
editable: false,
selectedDate : moment().format('DD-MM-YYYY'),
task: {
title:null,
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
},
newtask: {}
}
},
methods: {
addTask: function(event){
var d = moment().format('YYYY-MM-DD');
var sel = new Date(this.selectedDate.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
//console.log();
var date = new Date(moment(sel).format('YYYY-MM-DD')+ 'T00:00:00'); // will be in local time
this.tasks.push({
title: this.task.title,
start: date,
end: date
});
this.$nextTick(function () {
// DOM is now updated
// `this` is bound to the current instance
//this.doSomethingElse()
})
},
dateClicked: function(date) {
this.selectedDate = moment(date.date).format('DD-MM-YYYY');
},
eventClicked: function(event) {
this.selectedDate = moment(event.event.start).format('DD-MM-YYYY');
},
showObject: function() {
console.log(this.tasks);
}
}
})
<link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container mt-5" id="app">
<div>
<div class="row">
<div class="col-md-8">
<full-calendar
v-bind:tasks="tasks"
v-on:date_clicked="dateClicked"
v-on:event_clicked="eventClicked"
:newtask="newtask"
></full-calendar>
</div>
<div class="col-md-4">
<div class="pb-3">
<span id="CurrentDate" class="" style="cursor: pointer;">{{selectedDate}}</span>
<span class="badge badge-primary">{{tasks.length}}</span>
<button #click="showObject">show object</button>
</div>
<table class="table table-condensed">
<tbody v-for="task in tasks">
<tr>
<td>
<input
type="checkbox"
/>
</td>
<td>{{task.title}}</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr v-if="tasks.length==0">
<td colspan="3" class="text-center">No tasks to display</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-sm" #click="addTask">Add</button>
<button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
Hi everyone,
I am trying to bind an object ‘tasks’ with full calendar events however it is not working.
Please see example above provided. View it in full page please
When you add a task, I am expecting it to be added to the tasks objects and of course to be be binded to the events in full calendar.
Basically, I want to bind tasks array to full calendar events object, so if for example I remove an item should also be removed from the full calendar events
Please let me know if I am doing it wrong . thanks a bunch
[1]:

It should be as simple as updating the FullCalendar when new tasks are sent from the Parent (new Vue) to Child (full-calendar).
In your full-calendar component you should be able to just call the render() method which according to the FullCalendar docs will rerender the calendar if it already exists. In your architecture it is as simple as recalling the init() method. I also moved close modal logic to the appropriate place. This could probably user a bit more refactoriing but this should get you unstuck. Hope it helps.
watch: {
tasks: function (task) {
this.cal.calendar.render();
}
}
https://fullcalendar.io/docs/render
Vue.component('full-calendar', {
template: '<div ref="calendar"></div>',
props: {
tasks: {
type: Array,
required: true
},
newtask: Object
},
watch: {
tasks: function (task) {
this.init()
}
},
data () {
return {
cal: null
}
},
methods: {
init:function(){
var self = this;
self.cal = $(self.$refs.calendar);
var args = {
firstDay: 1,
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'addTaskButton / dayGridMonth,timeGridWeek,listMonth'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
plugins: ["interaction", "dayGrid"],
eventLimit: true,
events: this.tasks,
dateClick: function(date)
{
self.$emit('date_clicked', date);
console.log('date clicked');
console.log(this);
},
eventClick: function(event)
{
self.$emit('event_clicked', event);
},
customButtons: {
addTaskButton: {
text: 'Add Task',
click: function() {
$("#addTaskModal").modal('show');
}
}
}
}
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$emit('event::resized', event);
}
args.eventDrop = function(event)
{
self.$emit('event::dropped', event);
}
}
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$emit('event::received', event);
}
}
self.cal.calendar = new FullCalendar.Calendar(self.$el,args);
self.cal.calendar.render();
}
},
mounted () {
this.init();
}
})
let vm = new Vue({
el: '#app',
data () {
return {
tasks: [
{
title: 'Event1',
start: '2019-05-10 12:30:00',
end: '2019-05-10 16:30:00'
},
{
title: 'Event2',
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
}
],
editable: false,
selectedDate : moment().format('DD-MM-YYYY'),
task: {
title:null,
start: '2019-05-07 17:30:00',
end: '2019-05-07 21:30:00'
},
newtask: {}
}
},
methods: {
addTask: function(event){
var d = moment().format('YYYY-MM-DD');
var sel = new Date(this.selectedDate.replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
//console.log();
var date = new Date(moment(sel).format('YYYY-MM-DD')+ 'T00:00:00'); // will be in local time
this.tasks.push({
title: this.task.title,
start: date,
end: date
});
$("#addTaskModal").modal('hide');
this.$nextTick(function () {
// DOM is now updated
// `this` is bound to the current instance
//this.doSomethingElse()
})
},
dateClicked: function(date) {
this.selectedDate = moment(date.date).format('DD-MM-YYYY');
},
eventClicked: function(event) {
this.selectedDate = moment(event.event.start).format('DD-MM-YYYY');
},
showObject: function() {
console.log(this.tasks);
}
}
})
<link href="https://fullcalendar.io/releases/core/4.1.0/main.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://fullcalendar.io/releases/core/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.1.0/main.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container mt-5" id="app">
<div>
<div class="row">
<div class="col-md-8">
<full-calendar
v-bind:tasks="tasks"
v-on:date_clicked="dateClicked"
v-on:event_clicked="eventClicked"
:newtask="newtask"
></full-calendar>
</div>
<div class="col-md-4">
<div class="pb-3">
<span id="CurrentDate" class="" style="cursor: pointer;">{{selectedDate}}</span>
<span class="badge badge-primary">{{tasks.length}}</span>
<button #click="showObject">show object</button>
</div>
<table class="table table-condensed">
<tbody v-for="task in tasks">
<tr>
<td>
<input
type="checkbox"
/>
</td>
<td>{{task.title}}</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr v-if="tasks.length==0">
<td colspan="3" class="text-center">No tasks to display</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="NewTaskTitle" placeholder="Enter task name" class="form-control" v-model="task.title" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-sm" #click="addTask">Add</button>
<button data-bind="click: CancelAddNewTask" class="btn btn-seconday btn-sm" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>

watch: {
tasks: function (tasks) {
this.calendarOptions.events = tasks;
let calendarApi = this.$refs.fullcalendar.getApi();
calendarApi.render();
},
},
... ...
<FullCalendar
ref="fullcalendar"
:options="calendarOptions"
/>

Drag and drop events with FullCalendar

I am trying to implement a drag and drop using FullCalendar.js, the idea is basically to have a menu on the left with a list of events that are draggable and you can drop on the calendar (which would then execute a function that will add these to GoogleCalendar).
My problem is that the 'drop' is not working for some reason, I can drag the text on the top, but the "drop" event is not being fired on FullCalendar:
HTML:
<div class="wrapper wrapper-content" id="calendar-wrap">
<div class="row animated fadeInDown">
<div class="col-lg-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Draggable Events</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id='external-events'>
<p>Drag a event and drop into calendar.</p>
<div id="evt1" class='external-event navy-bg'>Call Client.</div>
<div id="evt2" class='external-event navy-bg'>Confirm Client Happy with Quote.</div>
<div id="evt3" class='external-event navy-bg'>Send Quote.</div>
<div id="evt4" class='external-event navy-bg'>Something Else.</div>
<div id="evt5" class='external-event navy-bg'>One more for luck.</div>
<p class="m-t">
<input type='checkbox' id='removeEventAfterDrop' checked /> <label for='removeEventAfterDrop'>remove after drop</label>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Calendar Monthly View </h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id="myFullCalendar"></div>
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('div.external-event').each(function() {
console.log("external event");
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1000,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#myFullCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(){
console.log("dropped");
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
]
});
});
Js Fiddle:
https://jsfiddle.net/filipecss/x74so0tz/7/
What could be causing this issue?
Thanks in advance,

It turns out the problem in my fiddle was one of the external css files:
https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.css
Apparently fullcalender.print.css breaks the drag and drop.

Angular Bootstrap calendar default templates not loading

I'm using angular bootstrap calendar by https://github.com/mattlewis92/angular-bootstrap-calendar#installation
I am not able to see the calendar template it looks like this
angular controller is
module app.calendar.controllers {
import angularCalendar = angular.bootstrap.calendar;
export class calendarSample1Controller //implements angular.bootstrap.calendar.events.IOnEditEventClick
{
calendarTitle: string;
calendarView: string = "month";
viewDate: Date = new Date();
events: Array<angularCalendar.IEvent>;
isCellOpen: boolean = true;
customTemplateUrls: string[];
constructor(private calendarConfig: angularCalendar.ICalendarConfig, private $templateCache: ng.ITemplateCacheService, private $http: ng.IHttpService) {
$templateCache.get('calendar.html');
this.getEvents();
}
private getEvents() {
//TODO get all the events from service
this.events = [
{
title: 'An event',
color: this.calendarConfig.colorTypes.hearings,
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: false,
resizable: false,
}, {
title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
color: this.calendarConfig.colorTypes.holidays,
startsAt: moment().subtract(1, 'day').toDate(),
endsAt: moment().add(5, 'days').toDate(),
draggable: false,
resizable: false,
}, {
title: 'This is a really long event title that occurs on every year',
color: this.calendarConfig.colorTypes.inspections,
startsAt: moment().startOf('day').add(7, 'hours').toDate(),
endsAt: moment().startOf('day').add(19, 'hours').toDate(),
recursOn: 'year',
draggable: false,
resizable: false,
}
];
}
eventClicked(calendarEvent: angularCalendar.IEvent): void {
console.log("clicked");
};
}
}
and the view I am using is this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1>Calendar sample 1</h1>
<div ng-controller="calendarController as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:59"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)">
</mwl-calendar>
</div>
The controller is bound like this
module app.calendar {
"use strict";
import calendarSample1Controller = app.calendar.controllers.calendarSample1Controller ;
import angularCalendar = angular.bootstrap.calendar;
angular.module("app.calendar", ['mwl.calendar', 'ui.bootstrap','ngAnimate',])
.controller("calendarController", ["calendarConfig", "$templateCache", '$http', calendarSample1Controller])
.config(function () {
});
}
There are no errors on the page but the template isn't loading,
I'm not sure where to place the templates, the project convention is not to use html files but to return razor views so I even attempted to give urls in the calendarConfig.templates but the code to get the template content gets called before the templates are actually loaded.
I'm not sure if I'm doing something wrong with this plugin, but if someone can explain how the templates are loaded that would be great.
Thanks!

The templates were simply not loaded, the js requires you to load the templates into templatecache, I used
template content to have them into the template cache in order to show them

Full Calendar with Modal and Multiple event details - Meteor

I'm using the FullCalendar package as well as the below code which is working perfectly:
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">
Delete
Save
Cancel
</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();
}
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.