How can I consume a JSON feed? The webmethod gets hit, but it throwns the error, "error while fetching events." I think its related to ASP.NET wrapping everything with "d." but I don't know how to proceed.
[WebMethod]
public string GetEvents(string webMethodParam)
{
return #"[{""title"": ""All Day Event"",""start"": ""2014-09-01""}]";
}
function createCal() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [{
url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetEvents",
type: 'POST',
data: {
webMethodParam: 'something'
},
error: function () {
alert('there was an error while fetching events!');
}
}],
defaultDate: '2014-09-12',
editable: false,
eventLimit: true
});
}
It was related to this weird "d." wrapper. To fix it I did the following.
[WebMethod]
public void GetEvents(string webMethodParam)
{
string ret = #"[{""title"": ""All Day Event"",""start"": ""2014-09-01""}]";
this.Context.Response.ContentType = "application/json; charset=utf-8";
this.Context.Response.Write(ret);
}
To create the calendar to async call the webmethod with the current date, I did this.
function getCalendarDisplayDate() {
try {
var now = moment().format("dddd, MMMM Do, YYYY, h:MM:ss A");
var m = moment();
var moment2 = $('#calendar').fullCalendar('getDate');
return moment2.format();
}
catch (err) {
}
return "init";
}
function createCal() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [{
url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetEvents",
type: 'POST',
data: {
webMethodParam: getCalendarDisplayDate
},
error: function (v) {
alert('there was an error while fetching events!');
}
}],
defaultDate: '2014-09-12',
editable: false,
eventLimit: true
});
}
Related
I am trying full calendar for the first time on an ASP.NET MVC page. for the timezone, I have tried using 'local', 'America/Chicago'( as well as America/New_York and America/Los_Angeles) and variations of UTC all to no avail. When it has timezone: 'local' every event will show 2 hours after the start of each event, so an event at 11am will say 1pm. UTC is worse it is 8 hours off then. How do I fix this??
Here is the code
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<script>
$(document).ready(function () {
$('#coverage').click(function () {
$('#Map').show();
});
$('#close').click(function () {
$('#Map').hide();
});
var events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
$.each(data, function (i, evt) {
events.push({
title: evt.Title,
start: evt.Start,
id: evt.ID
});
});
GenerateCalendar(events);
}
});
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
header: {
right: '',
center: '',
left: ''
},
theme: true,
timezone: 'local',
editable: false,
defaultDate: '#Convert.ToDateTime(ViewBag.EventDate).ToShortDateString() ',
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: events,
eventClick: function (calEvent) {
window.location = '/MonthlyEvents/Details/' + calEvent.id;
}
});
}
});
</script>
For some reason, our Fullcalendar with resources does not want to start on monday, it always starts on the current day that we are. According to the docs, we should use firstDay, it also states that :
If weekNumberCalculation is set to 'ISO', this option defaults to 1 (Monday).
Which we did in our case, but no changes. We also tried upgrading to a different version (all above 5) but to no avail.
We are using version v5.11.3 of Fullcalendar (premium).
Anyone that can point us in the right direction?
In the screenshot that I've added, you can see it start on today (friday 18/11/2022).
var calendarEl = document.getElementById('calendar2');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'xxx',
timeZone: 'UTC',
initialView: 'resourceTimelineWeek',
hiddenDays: [0, 6],
locale: 'nl-be',
weekNumberCalculation: "ISO",
droppable: true,
eventStartEditable: false,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek'
},
views: {
resourceTimelineWeek: {
duration: {days: 7},
slotDuration: '24:00:00',
buttonText: "Week",
},
resourceTimelineDay: {
duration: {days: 1},
slotDuration: '24:00:00',
buttonText: "Dag"
}
},
editable: true,
events: {
url: 'xxx.php',
type: 'POST',
error: function () {
alert('there was an error while fetching events!');
}
},
refetchResourcesOnNavigate: true,
resources: {
url: 'xxx.php',
type: 'POST',
error: function () {
alert('there was an error while fetching events!');
}
}, eventReceive: function (info) {
var resourceid = info.event._def.resourceIds[0];
var date = info.event._instance.range.start.toLocaleString();
var employeeid = info.draggedEl.dataset.employeeid;
$.ajax({
type: "POST",
url: "xxx.php",
cache: false,
data: {
'resourceid': resourceid,
'date': date,
'employeeid': employeeid
},
dataType: 'json',
success: function (data) {
var response = eval(data);
info.revert();
if (response.success) {
refetch();
}
}
});
}, eventContent: function (arg) {
let divEl = document.createElement('div');
let htmlTitle = arg.event._def.extendedProps.html;
divEl.innerHTML = htmlTitle;
let arrayOfDomNodes = [divEl];
return {domNodes: arrayOfDomNodes}
}
});
calendar.render();
function refetch() {
//direct refetch doesn't work
calendar.refetchEvents();
}
I am trying to render events and resources which are stored in a database. I can get the calendar to render with predefined data for events and resources, however when I push data into the array's, the new objects do not appear when the calendar is rendered.
This is the JS code I am using to obtain the data and render the calendar;
function GetCalenderDetails() {
$.ajax({
url: 'myapiendpoint',
type: 'GET',
success: function (response) {
$.each(response.bookedServices, function (i, v) {
services.push({
id: v.id,
title: v.title
});
});
console.log(JSON.stringify(services));
$.each(response.userBookings, function (i, v) {
bookings.push({
id: v.id,
resourceId: v.resourceId,
title: v.title,
start: v.start,
allDay: v.allDayFlag
});
});
console.log(JSON.stringify(bookings));
calendar.render();
},
error: function (error) {
console.log(error);
}
});
}
var bookings = new Array({ id: '1', resourceId: 'a', title: 'Meeting', start: '2021-03-14', allDay: true });
var services = new Array({ id: 'a', title: 'Room A' });
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
timeZone: 'UTC',
initialView: 'resourceTimelineDay',
aspectRatio: 1.5,
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Resources',
resources: services,
events: bookings
});
GetCalenderDetails();
The following is the console output of the 'services' and 'bookings' variables after the GetCalenderDetails function is executed;
Resources Output
[{"id":"a","title":"Room A"},{"id":"b","title":"Room B"}]
Events Output
[{"id":"1","resourceId":"a","title":"Meeting","start":"2021-03-14","allDay":true},
{"id":"2","resourceId":"b","title":"Meeting B","start":"2021-03-15","allDay":true}]
The first resource and event will render, however the second item which is pushed into the array from the GetCalenderDetails function do not render.
I am probably missing something very obvious, but I am not seeing it, so another set of eyes might help :)
As suggested by ADyson's comments, here is the solution to my problem just in case anyone else ends up in the same position;
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
timeZone: 'UTC',
initialView: 'resourceTimelineDay',
headerToolbar: {
left: 'prev,next,today',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
editable: true,
resourceAreaHeaderContent: 'Booked Services',
resources: function (info, successCallback, failureCallback) {
$.ajax({
url: 'myapiendpoint',
type: 'GET',
success: function (response) {
var resources = [];
console.log(response);
if (response.status == true) {
$.each(response.bookedServices, function (i, v) {
resources.push({
id: v.id,
title: v.title
});
});
} else {
//Do something
}
return successCallback(resources);
},
error: function (error) {
console.log(error);
}
});
},
events: function (info, successCallback, failureCallback) {
$.ajax({
url: 'myapiendpoint',
type: 'GET',
success: function (response) {
var events = [];
console.log(response);
if (response.status == true) {
$.each(response.userBookings, function (i, v) {
events.push({
id: v.id,
title: v.title,
start: v.start,
allDay: v.allDayFlag
});
});
} else {
//Do something
}
return successCallback(events);
},
error: function (error) {
console.log(error);
}
});
}
});
calendar.render();
I am using fullcalendar with json feed, the code is as follows
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: {
url: '/EventInfo/GetEventsByEmployee',
cache: false,
lazyFetching:true,
type: 'POST',
data: {
empId: $('#eventownerId').val()
},
error: function () {
alert('there was an error while fetching events!');
},
},
dayClick: function (date, allDay, jsEvent, view) {
displayDayEvents(date, allDay, jsEvent, view);
},
eventRender: function (event, element) {
element.find('.fc-event-time').hide();
element.attr('title', event.tip);
}
});
Here I am passing selected value of drop down control through data field as "empId: $('#eventownerId').val()". It returns correct data at page load.
Now I want to reload the calendar data when user selects option from drop down list.
for this purpose I used following code
$('#eventownerId').change(function (e) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');
});
But refetch calls the json method with old data (i.e. initial value of drop down control), even selected value of drop down has been changed.
How I can pass current value of drop down control and reload the fullcalendar?
I managed the problem by calling destroy of fullcalendar, as follows
$('#dropdownlistId').change(function (e) {
$('#calendar').fullCalendar('destroy');
RenderCalendar($(this).val());
});
and RenderCalendar() is
function RenderCalendar(eId) {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: {
url: '/EventInfo/GetEventsByEmployee',
cache: true,
type: 'POST',
data: {
empId: eId
},
error: function () {
alert('there was an error while fetching events!');
},
},
dayClick: function (date, allDay, jsEvent, view) {
displayDayEvents(date, allDay, jsEvent, view);
},
eventRender: function (event, element) {
element.find('.fc-event-time').hide();
element.attr('title', event.tip);
}
});
}
Using this I managed the problem but not sure this is correct way of doing it. i.e. destroying and recreating the calendar. I am still searching for correct way
Have you tried get the id in a var and then do it like this?
var id = $('#eventownerId').val(); //outside
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: {
url: '/EventInfo/GetEventsByEmployee',
cache: false,
lazyFetching:true,
type: 'POST',
data: {
empId: id // var in here
},
error: function () {
alert('there was an error while fetching events!');
},
},
dayClick: function (date, allDay, jsEvent, view) {
displayDayEvents(date, allDay, jsEvent, view);
},
eventRender: function (event, element) {
element.find('.fc-event-time').hide();
element.attr('title', event.tip);
}
});
Another thing check if the ID is actually getting the diferent id from dropdown. Can you show the GetEventsByEmployee method? Cheers
I have this code that works and shows the events on the calendar when I switch views but not when the calendar first initilizes.
$('#calWrap').fullCalendar({
header: {
right: 'prev,today,next',
left: 'title'
},
editable: true,
defaultView: 'agendaWeek',
height: 650,
events: function(start, end, callback) {
$.ajax({
url: '/calendar/getEvents',
dataType: 'json',
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000)
},
success: function(doc) {
var events = doc;
callback(events);
}
});
}
});
I tried calling $('#calWrap').fullCalendar( 'rerenderEvents' ); in the success handler but that did not work. It's like the events function doesn't get called on the calendar initialization.
Try this
$('#calWrap').fullCalendar({
header: {
right: 'prev,today,next',
left: 'title'
},
editable: true,
defaultView: 'agendaWeek',
height: 650,
events: {
url: '/calendar/getEvents',
dataType: 'json',
data: {
// our hypothetical feed requires UNIX timestamps
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000)
}
}
}
});