Load Events in FullCalendar using Asp.Net mvc4 - javascript

I'm trying to load data into an FullCalendar, using Json. But i can't load the data:
The controller:
ppublic ActionResult GetEvents()
{
List<Models.Events> events = new List<Models.Events>()
{
new Models.Events("Fremvising","2013-01-11T14:08:00Z", "2013-01-11T16:09:00Z", false),
new Models.Events("Fremvising","2013-01-12T15:09:00Z", "2013-01-11T17:10:00Z", false),
new Models.Events("Fremvising","2013-01-13T16:10:00Z", "2013-01-11T18:11:00Z", false),
new Models.Events("Fremvising","2013-01-14T17:11:00Z", "2013-01-11T19:12:00Z", false),
new Models.Events("Fremvising","2013-01-15T18:12:00Z", "2013-01-11T20:13:00Z", false),
new Models.Events("Fremvising","2013-01-16T19:13:00Z", "2013-01-11T21:14:00Z", false)
};
return Json(events, JsonRequestBehavior.AllowGet);
}
And the javascript:
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay',
height: 650,
// url:,
}, events: [
$.getJSON("#Url.Action("GetEvents")", function (locationsArray) {
$.each(locationsArray, function (index, location) {
title : location.title;
start: location.start;
end: location.end;
allDay: location.editable; // will make the time show
});
})
],
allDaySlot: false,
//minTime: 10,
//maxTime: 21,
dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag',
'Torsdag', 'Fredag', 'Lørdag'],
dayNamesShort: ['Søn', 'Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør'],
editable: true,
defaultView: 'agendaWeek',
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
$('#tabs').tabs({
show: function (event, ui) {
$('#calendar').fullCalendar('render');
}
});
For some reason it doesnt get the json result.
The Json request
0: {title:Fremvising, start:2013-01-11T14:08:00Z, end:2013-01-11T16:09:00Z, editable:false}
1: {title:Fremvising, start:2013-01-12T15:09:00Z, end:2013-01-11T17:10:00Z, editable:false}
2: {title:Fremvising, start:2013-01-13T16:10:00Z, end:2013-01-11T18:11:00Z, editable:false}
3: {title:Fremvising, start:2013-01-14T17:11:00Z, end:2013-01-11T19:12:00Z, editable:false}
4: {title:Fremvising, start:2013-01-15T18:12:00Z, end:2013-01-11T20:13:00Z, editable:false}
5: {title:Fremvising, start:2013-01-16T19:13:00Z, end:2013-01-11T21:14:00Z, editable:false}

You have incorrectly defined the events property of your FullCalendar. You have assigned it to a javascript array but that's incorrect because your data is coming from the server. You should set it to an anonymous function. Also you seem to be triggering an AJAX request to the server but inside the success callback you are doing absolutely nothing with the results other than looping through them but you never pass them to the FullCalendar. Here's the correct way to define the events property:
events: function (start, end, callback) {
$.getJSON("#Url.Action("GetEvents")", function (locationsArray) {
var result = $(locationsArray).map(function () {
return {
title: this.title,
start: this.start,
end: this.end,
allDay: this.editable
};
}).toArray();
callback(result);
});
},
Notice how we are performing a transformation over the result coming from the server (which wouldn't have been necessary of course if you had used view models) and then we are calling the callback property with this transformed resultset.
Alright and here's a step by step guide:
Create a new ASP.NET MVC 4 application using the Internet Application Template
Modify HomeController to look like this:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetEvents()
{
var events = new[]
{
new { title = "Fremvising", start = "2013-01-11T14:08:00Z", end = "2013-01-11T16:09:00Z", editable = false },
new { title = "Fremvising", start = "2013-01-12T15:09:00Z", end = "2013-01-11T17:10:00Z", editable = false },
new { title = "Fremvising", start = "2013-01-13T16:10:00Z", end = "2013-01-11T18:11:00Z", editable = false },
new { title = "Fremvising", start = "2013-01-14T17:11:00Z", end = "2013-01-11T19:12:00Z", editable = false },
new { title = "Fremvising", start = "2013-01-15T18:12:00Z", end = "2013-01-11T20:13:00Z", editable = false },
new { title = "Fremvising", start = "2013-01-16T19:13:00Z", end = "2013-01-11T21:14:00Z", editable = false }
};
return Json(events, JsonRequestBehavior.AllowGet);
}
}
Download FullCalendar and put it into the Scripts folder
Modify ~/Views/Shared/_Layout.cshtml to look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
#RenderSection("styles", required: false)
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
And ~/Views/Home/Index.cshtml like that:
<div id="calendar"></div>
#section styles {
<link href="~/scripts/fullcalendar-1.5.4/fullcalendar/fullcalendar.css" rel="stylesheet" />
}
#section scripts {
<script type="text/javascript" src="~/scripts/fullcalendar-1.5.4/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript">
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay',
height: 650,
},
events: function (start, end, callback) {
$.getJSON("#Url.Action("GetEvents")", function (locationsArray) {
var result = $(locationsArray).map(function () {
return {
title: this.title,
start: this.start,
end: this.end,
allDay: this.editable
};
}).toArray();
callback(result);
});
},
allDaySlot: false,
dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
dayNamesShort: ['Søn', 'Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør'],
editable: true,
defaultView: 'agendaWeek',
droppable: true,
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
</script>
}

Related

GetEvents from FullCalendar

I'm working with Full Calendar I want to create a button that take all the events from the calendar and send them to my database. But when trying to call the getEvents method referenced here from the calendar object, I cannot get it to work. The method doesn't seem to exist. I get undefined method.
Below is a snippet of the initialization of the calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function(arg) {
if (confirm('Are you sure you want to delete this event?')) {
arg.event.remove()
}
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-16T16:00:00'
},
{
title: 'Conference',
start: '2020-09-11',
end: '2020-09-13'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2020-09-28'
}
]
});
calendar.render();
I use the last version of Full Calendar (v5)
When I try to create a button that will get the calendar then retrieve all the events and send it to my database I get error saying that the function doesn't exist.
Here is how I do that :
var calendar = document.getElementById("calendar");
/* I can do that since I have my calendar with the id "calendar"
And then I try use the getEvents function
*/
var events = calendar.getEvents();
/* Show undefined */
<div id="calendar"></div>
Super Important Note: I realized that the function doesn't exist since I try to apply it to the HTML element and not the FullCalendar JS object. So my question is how can I get a FullCalendar JS Object from the HTML element in order to retrieve the events that the user has saved ??
Your problem is because var calendar = document.getElementById("calendar"); fetches the HTML element into which the rest of the calendar's HTML was added by fullCalendar. It does not fetch the fullCalendar instance which was generated by new FullCalendar.Calendar when you intialised the calendar. It's the latter which exposes the functions to manipulate the calendar or get data from it.
Notice how you already use that object in your code to call fullCalendar's render function, e.g. calendar.render();.
(The HTML element object just contains standard functions found on any HTML element, not anything specific to fullCalendar.)
So in summary you need to use the calendar variable you created from the new FullCalendar... instantiation. If you need access to that outside the scope it was originally declared in (which is the callback of the DOMContentLoaded event handler), then one way round that is to make it a global variable, e.g.
var calendar; //global variable
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
....
});
calendar.render();
});
Then somewhere else in your code, wherever you need it, you can write
var events = calendar.getEvents();

How to add remove event option with cross sign in fullcalendar.io ? asp.net mvc core

I am going to add remove cross sign with each event of calendar which are getting from database. But how to add this and i want when click on cross sign(delete) then specific url will be triggered and i want to delete event from database. Please let me know how can i do this? How to add delete event with cross sign.
call-init.js
!function($) {
"use strict";
var CalendarApp = function() {
this.$body = $("body")
this.$calendar = $('#calendar'),
this.$event = ('#calendar-events div.calendar-events'),
this.$categoryForm = $('#add-new-event form'),
this.$extEvents = $('#calendar-events'),
this.$modal = $('#my-event'),
this.$saveCategoryBtn = $('.save-category'),
this.$calendarObj = null
};
/* Initializing */
CalendarApp.prototype.init = function() {
this.enableDrag();
/* Initialize the calendar */
var events = [];
$.ajax({
type: 'POST',
async: false,
url: '/Booking/GetBookings',
success: function (mems) {
//states contains the JSON formatted list
//of states passed from the controller
$.each(mems, function (_, member) {
debugger;
events.push({
title: member.guestname,
start: new Date(member.checkindatetime),
end: new Date(member.checkoutdatetime),
allDay: true,
url: '/Booking/Booking/' + member.encryptedId,
className: member.classnamecolor
});
});
},
error: function (ex) {
alert('Buchungen konnten nicht geladen werden.');
}
});
var $this = this;
$this.$calendarObj = $this.$calendar.fullCalendar({
defaultView: 'month',
handleWindowResize: true,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
navLinks: false, // can click day/week names to navigate views
events: events
//eventStartEditable: false // disable drag&drop of events
});
},
//init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
}(window.jQuery),
//initializing CalendarApp
function($) {
"use strict";
$.CalendarApp.init()
}(window.jQuery);
other calendar view is
#model FewoVerwaltung.Models.Booking.BookingListModel
<div id="calendar"></div>
<!-- Calendar JavaScript -->
<script src="~/plugins/calendar/dist/locale/de.js"></script>
<script src="~/plugins/calendar/dist/fullcalendar.min.js"></script>
<script src="~/plugins/calendar/dist/cal-init.js"></script>

FullCalendar RenderEvent Not working in version 3.9.0

i'm trying to upgrade my fullCalendar version to the latest ( 3.9.0 ) but i can't seams to make the renderEvent function work. The event simply does not render. I'm also using the latest version of the scheduler plugin ( 1.9.3 )
I tried adding events using the $('#calendar').fullCalendar('renderEvent', event, true) like I used to, but now it does not seams to work.
I also tried $('#calendar').fullCalendar('addEventSource', event) followed by $('#calendar').fullCalendar('refetchEventSources') nothing seams to be working.
Here is my code.
$(document).ready(function() {
//Calendar option
const LOCALE_DEFAULT = 'fr';
const TIMEZONE_DEFAULT = 'local';
const IGNORE_TIMEZONE_DEFAULT = false;
const HEIGHT_DEFAULT = 'auto';
const DROPPABLE_DEFAULT = true;
const ALL_DAY_DEFAULT_DEFAULT = false;
const ALL_DAY_DEFAULT = false;
const ALL_DAY_SLOT_DEFAULT = false;
const TIME_EVENT_DURATION_DEFAULT = '03:00:00';
const SELECTABLE_DEFAULT = true;
const SLOT_EVENT_OVERLAPP_DEFAULT = false;
const SELECT_HELPER_DEFAULT = false;
const EVENT_RESOURCE_EDITABLE_DEFAULT = false;
const PUBLISHED = true;
const SCHEDULER_LICENCE = 'CC-Attribution-NonCommercial-NoDerivatives';
let events = [{"id":2,"title":"test","start":"2018-03-18T15:30:00.000Z","end":"2018-03-18T19:30:00-04:00","creationDate":"2018-03-18 14:55:25","resourceFullName":"testRessource","resourceId":3,"type":"shift"}];
let resources = [{
fullname: "resource 1",
id: 1
},
{
fullname: "resource 3",
id:3
}]
$("#calendar").fullCalendar({
locale: LOCALE_DEFAULT,
timezone: TIMEZONE_DEFAULT,
ignoreTimezone: IGNORE_TIMEZONE_DEFAULT,
slotDuration: '00:30:00',
height: HEIGHT_DEFAULT,
header: {
left: 'prev,next today',
center: 'title',
right: 'timelineDay, weekCustom' + /*, timelineWeek */', month, agendaDay'
},
buttonText: {
today: "today",
timelineDay: "timelineDay",
timelineWeek: "timelineWeek",
month: "month",
agendaDay: "agenda"
},
views: {
weekCustom: {
type: 'timeline',
timeFormat: 'H(:mm)',
buttonText: 'Semaine',
displayEventEnd: true,
duration: {week: 1},
slotDuration: {days: 1}
}
},
defaultView: "weekCustom",
lang: 'fr'/*$filter('translate')('language')*/,
scrollTime: "08:00:00",
resourceAreaWidth: "220px",
events: events,
editable: true,
droppable: DROPPABLE_DEFAULT,
allDayDefault: ALL_DAY_DEFAULT_DEFAULT,
allDay: ALL_DAY_DEFAULT,
allDaySlot: ALL_DAY_SLOT_DEFAULT,
defaultTimedEventDuration: TIME_EVENT_DURATION_DEFAULT,
resourceLabelText: "resources",
schedulerLicenseKey: SCHEDULER_LICENCE,
selectable: SELECTABLE_DEFAULT,
slotEventOverlap: SLOT_EVENT_OVERLAPP_DEFAULT,
selectHelper: SELECT_HELPER_DEFAULT,
eventResourceEditable: EVENT_RESOURCE_EDITABLE_DEFAULT,
resources: resources,
select: function (start, end, jsEvent, view, resourceObj) {
let event = {
start: start,
end: end,
title: "test"
};
//$("#calendar").fullCalendar('addEventSource', [event]);
//$("#calendar").fullCalendar('refetchEventSources', [event]);
//true for stick events
$("#calendar").fullCalendar('renderEvent', event, true);
},
eventClick: function (event, jsEvent, view) {
},
eventDrop: function (event, delta, revertFunc) {
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
},
viewRender: function (view) {
},
loading: function (bool, view) {
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.3/scheduler.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.3/scheduler.min.js"></script>
<div id="calendar">
</div>
P.S. use the timeline day for a more efficient test.
Your code works fine, and creates the event quite happily - try it: select a time period (in any view), remember the date/time you chose, and then go to your "month" view. You will see the created event in the timeslot you selected.
The problem comes when you try to view the event in a view which uses resources. Your code does not specify a resourceId for the new event. Therefore, fullCalendar has no idea which resource to show the event on, and so cannot display it at all in any resource-aware view.
To fix this, simply take the resourceId supplied in the resourceObj parameter of the select callback, and include it in your new event object:
let event = {
start: start,
end: end,
title: "test",
resourceId: resourceObj.id
};
P.S. you should also run "unselect" after the call to "renderEvent", otherwise the timeslot chosen will remain highlighted on the calendar behind the created event (until or unless the user clicks elsewhere). In some views this is more obvious than others, but it doesn't look right. The command is simply:
$("#calendar").fullCalendar('unselect');

Fullcalendar, preventing user from selecting multiple day event

In my fullcalendar http://fullcalendar.io/
I want to prevent a user to be able to create an event on multiple days
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
lang: "fr",
header: false,
timezone: 'local',
minTime: "08:00:00",
columnFormat: 'dddd',
selectHelper: true,
selectable: true,
select: function(start, end, id, allDay) {
var eventData = {
start: start,
end: end,
id: 1,
block: true,
editable: true,
backgroundColor: "#469278"
};
// console.log(moment(eventData.start["_d"]).format("dddd"));
// console.log(moment(eventData.end["_d"]).format("dddd"));
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
// console.log(eventData);
if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
$('#calendar').fullCalendar('unselect');
};
var day = moment(eventData.start["_d"]).format("dddd");
var start_time = moment(eventData.start["_d"]).format("HH:mm");
var end_time = moment(eventData.end["_d"]).format("HH:mm");
var id = moment(eventData.end["_id"]);
var slot = {
day: day,
start_time: start_time,
end_time: end_time
};
array_dispo.push(slot);
$("#dispo_array").val(JSON.stringify(array_dispo));
$('#calendar').fullCalendar('unselect');
},
});
});
When a user is selecting a start date that is different from the end date of his event I thus tried to use the unselect method from the doc http://fullcalendar.io/docs/selection/unselect_method/ like this :
if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
$('#calendar').fullCalendar('unselect');
};
But unfortunately this code doesnt automatically deselects the current selection...
You can do a check in your select method and then decide whether you want to render the event or not.
I also use Moment.js to calculate dates and durations, this library is included with FullCalendar (http://fullcalendar.io/docs/utilities/Moment/)
So I played around and came up with this:
select: function (start, end) {
var mEnd = $.fullCalendar.moment(end);
var mStart = $.fullCalendar.moment(start);
if (mEnd.isAfter(mStart, 'day')) {
$('#calendar').fullCalendar('unselect');
} else {
$('#calendar').fullCalendar('renderEvent', {
start: mStart,
end: mEnd,
allDay: false
},
true // stick the event
);
$('#calendar').fullCalendar('unselect');
}
}
Here is the jsfiddle if you want to see it in action: here
You can do it using this way:
eventResize: function(eventResizeInfo) {
console.log('eventResize is called');
var event = eventResizeInfo.event;
if (event.start.getDay() !== event.end.getDay()) {
eventResizeInfo.revert();
}
},
To prevent users from selecting multiple days at a time
selectAllow: function(selectedEvent) {
let startDate = selectedEvent.start;
let endDate = selectedEvent.end;
endDate.setSeconds(endDate.getSeconds() - 1);
if (startDate.getDate() === endDate.getDate()) {
return true;
} else {
return false;
}
}
Simply add the following option to your calendar:
selectAllow: (selectInfo) => { return selectInfo.start.getDay() === selectInfo.end.getDay() },

on refresh full calendar adds duplicate events

On the first load of the page, it shows a single event per day, but on the second load (or refresh of the page) it adds a duplicate event on the same day in the full calendar.
Here is my code:
var CalendarView = Backbone.View.extend({
el : '#calendar-box',
initialize : function() {
// TODO for instance: more instances, Event Bus bindings... only once.
this.calendarModel = new CalendarModel();
$('#calendar-box').hide();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
this.calendarModel.fetch({
success : function(model, response, options) {
$.unblockUI();
var count=0;
var eventsList=[];
model.attributes.result.forEach(function(){
eventsList.push({
id: model.attributes.result[count].eventId,
title:model.attributes.result[count].title,
start: new Date(model.attributes.result[count].startDate),
end: new Date(model.attributes.result[count].endDate),
attorneyName: model.attributes.result[count].attorneyName,
codeLitOrg: model.attributes.result[count].codeLitOrg,
balance: model.attributes.result[count].balance,
litCode: model.attributes.result[count].litCode
});
count++;
});
if (!_.isEmpty(eventsList)){
$('#calendar').fullCalendar({
editable: true,
events: eventsList,
eventMouseover: function(event, jsEvent, view) {
var info = event.title+'\nBK/LIT: '+event.codeLitOrg+'\nBalance: '+event.balance
+'\nAttorney: '+event.attorneyName+'\nLitCode: '+event.litCode;
$(jsEvent.target).attr('title', info);
},
theme: false,
height:575,
weekMode:'liquid',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
}
},
error : function(model, xhr, options) {
$.unblockUI();
}
});
$.eventBus.on('calendarModalLoaded',function(){
if (!($('.fc-border-separate').html())){
$('#calendar').fullCalendar('today');
}
});
},
render : function() {
// TODO for instance, bindings elements after ready in DOM.
$('#calendar').fullCalendar('today');
return this;
},
events : {
'click a.op-attorney-info' : 'onAttorneyInfo',
'click .go-back-link' : 'goBack'
},
goBack: function(){
$('#calendar-box, .content-box').toggle();
//$('.content-box').toggle();
//$('.go-back-link').hide();
},
onAttorneyInfo : function(ev) {
// TODO for instance, fetch attorney's model
}
});
return CalendarView;
});
I have tried $('#calendar').fullCalendar('removeEvents'), but it is also not working.
Please help me out.

Categories