Using the fullcalendar JQuery Model,
Works perfectly if I manually enter the javascript objects:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
theme:true,
events : [
{
title: 'Event1',
start: '2014-03-12'
},
{
title: 'Event2',
start: '2014-03-1'
}
// etc...
],
But when I use a JSON or JavaScriptSerializer ashx handler, nothing shows on the calendar. Am I missing something? or have I made a stupid error:
Code from page calling JSON or JavaScript - I actually get objects back and can see them but not on calendar:
events:
{
url: $("#ASHXHandlerTextBox").val(),
type: 'POST',
data: {
startdate: $("#StartDateTextBox").val(),
calendar: $("#CalendarToUseTextBox").val(),
userid: $("#UserIdTextBox").val()
},
error: function() {
alert($("#ASHXHandlerTextBox").val());
},
success: function (data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
alert(key + " -> " + data[key]);
}
}
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
});
Code from "ashx JavaScriptSerializer" file:
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(new
{
items = new[] {
new {title = "command" , start = "Wed, 12 Mar 2014 "},
new {title = "command2" , start = "Thu, 13 Mar 2014 "}
}
}));
Code from ashx JSON Handler:
context.Response.Write(JsonConvert.SerializeObject(new
{
items = new[] {
new {title = "command" , start = "2014-03-12"},
new {title = "command2" , start = "2014-03-13"}
}
}));
Any Ideas?
Related
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'm trying to use FullCalendar.io with tattali/calendar-bundle.
I want to display a calendar for a lending objects service.
So the calendar must show the days during which one object is unavialable.
The problem is I can't manage to send the object to fullcalendar so I can get the reservations and the days the object is reserved.
Here is my code for the Javascript :
document.addEventListener("DOMContentLoaded", () => {
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
headerToolbar: {
left: "prev,next",
center: "title",
right: "dayGridMonth,listWeek",
},
buttonText: {
today: "Today",
month: "month",
week: "week",
day: "day",
list: "list",
},
displayEventTime: false,
initialDate: Date.now(),
locale: "fr",
firstDay: "1",
// editable: true,
// dayMaxEvents: true,
eventSources: [
{
url: "/fc-load-events",
method: "POST",
extraParams: {
filters: JSON.stringify({}),
},
failure: () => {
console.log("There was an error while fetching FullCalendar!");
},
},
{
url: "/json-feed",
method: "POST",
extraParams: {
filters: JSON.stringify({}),
},
failure: () => {
console.log("There was an error while fetching FullCalendar!");
},
}
],
events: [
{
groupId: "association ouverte", // recurrent events in this group move together
daysOfWeek: ["3", "6"],
display: "background",
color: "#5c995e",
},
],
timeZone: "UTC",
});
calendar.render();
});
The Symfony controller :
// controller for displaying the page :
#[Route('/object-details/{slug}', name: 'object-details', methods: ['GET', 'POST'])]
public function detailsObject(
Object $object,
LoanRepository $loan,
): Response {
return $this->render('home/details-object.html.twig', [
'controller_name' => 'HomeController',
'object' => $object,
'loan' => $loan,
]);
}
// controller for getting json :
#[Route('/json-feed', name: 'json-feed')]
public function getJson(Request $request): JsonResponse
{
$response = new JsonResponse(['objet' => 12]);
dump($response);
return $response;
}
The json-feed route works but I don't know how to send the object details with it.
Thanks for any help.
Well I managed to do it that was pretty easy !
I was trying to send the object's data as a json but I just needed to get it with some jquery on the dom.
I did this :
//...
document.addEventListener("DOMContentLoaded", () => {
var calendarEl = document.getElementById("calendar");
// I get the object id from the dom :
var object = $("#objet-calendar").find('p').text();
//...
then I added it to the filters :
//...
{
url: "/fc-load-events",
method: "POST",
extraParams: {
filters: JSON.stringify({'object' : object}),
},
failure: () => {
console.log("There was an error while fetching FullCalendar!");
},
},
//...
Finally in onCalendarSetData()
//...
public function onCalendarSetData(CalendarEvent $calendar, $router)
{
$start = $calendar->getStart();
$end = $calendar->getEnd();
$filters = $calendar->getFilters();
$object = $this->objectRepo->findOneById($filters);
$object_id = $objet->getId();
//...
And it works
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'm trying to create a small application with Google Maps API.
First, I started with a navigation view named MainView; this is the code:
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainView',
requires: [
'Ext.navigation.Bar',
'Ext.Button',
'Ext.Panel',
'Ext.Map'
],
config: {
itemId: 'mynavigationview',
navigationBar: {
.......
layout: {
.....
},
items: [
......
]
},
items: [
{
xtype: 'panel',
title: 'Locations',
itemId: 'mapPanel',
items: [
{
xtype: 'map',
height: '100%',
itemId: 'map'
}
]
}
]
}});
Secand, in the controller mapController I made 3 references and 1 control onMapInitialize to center the map on my position with the the library ext.util.Geolocation. This is the code:
Ext.define('MyApp.controller.mapController', {
extend: 'Ext.app.Controller',
alias: 'controller.mapcontroller',
config: {
refs: {
mapView: {
selector: 'mainView #map',
xtype: 'Ext.Map'
},
mainView: {
selector: 'mainView',
xtype: 'Ext.navigation.View'
},
mapPanel: {
selector: 'mainView #mapPanel',
xtype: 'Ext.Panel'
}
},
control: {
"map#map": {
initialize: 'onMapInitialize'
}
}
},
onMapInitialize: function(component, eOpts) {
var map = this.getMapView();
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: false,
listeners: {
locationupdate: function(geo) {
var currentLat = geo.getLatitude();
var currentLng = geo.getLongitude();
console.log('marking current location...');
var currentLocation = new google.maps.LatLng(currentLat,currentLng);
map.setCenter(currentLocation);
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
position: currentLocation,
title: 'My Current Location'
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent('My current position');
infoWindow.open(this.getMap(), marker);
});
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout)
Ext.Msg.alert('Timeout occurred',"Could not get current position");
else
alert('Error occurred.');
}
}
});
geo.updateLocation();
}});
But when I test the application in the navigator, this error in this image has also appeared:
I think that, possibly, the instance var map = this.getMapView(); is not working or that's the wrong reference. Can anyone help?
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
});
}