Get BusinessHours in FullCalendar v 4.0 - javascript

i'm updating from FullCalendar v3 to v4 and have a problem getting the businessHours from the clicked resource.
In v3 i'm getting the businessHours this way:
select: function (eventClickInfo) {
console.log(eventClickInfo.resource)
}
Resource data:
...
businessHours: [
start: XXX
end: XXX
], [
start: XXX
end: XXX
]
...
But in V4 the resource Object got this structure:
_resource:
businessHours:
defs:
203:
allDay: false
defId: "203"
extendedProps:
end: {ms: 43200000, __edmType: "Edm.Time"}
groupId: "_businessHours"
hasEnd: true
...
204:
allDay: false
defId: "204"
extendedProps:
end: {ms: 72000000, __edmType: "Edm.Time"}
groupId: "_businessHours"
hasEnd: true
...
There is no start time and no way getting the business hours like .getResource("XXX").getBusinessHours()
Any ideas?

If you are intending to use the businessHours values to check that the user's selection of start/end times is within the defined hours, then you don't actually need any custom code for that, or to retrieve the businessHours values at all.
If you set the option
selectConstraint: "businessHours"
in your fullCalendar setup, then the calendar code will prevent the user from choosing any time outside the business hours automatically. They cannot even attempt to select it.
Demo: https://codepen.io/anon/pen/BEvoVN?&editable=true&editors=001
Documentation: https://fullcalendar.io/docs/selectConstraint

Related

Failure parsing JSON FullCalendar when adding events (as a json feed)

I'm working with Codeigniter 4, JQuery and AJAX
I added a calendar to my page using FullCalendar, the basic structure goes like this:
var base_url = $("#base_url").val();
var calendarEl = $("#calendar")[0];
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left:'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: base_url + '/calendar/fetch_activities',
editable: true,
buttonText: {
today: "Today",
month: "Month",
week: "Week",
day: "Day",
list: "List",
prev: "Prev",
next: "Next"
},
dateClick: function(info) {
// console.table(info);
}
});
I tried to fetch the events using
events: base_url + '/calendar/fetch_activities', which in theory should work as the structure it accepts is:
events: [
{
id: 'a',
title: 'my event',
start: '2018-09-01'
}
]
and my output from events: base_url + '/calendar/fetch_activities', is:
[{
"title":"Meeting with Mike",
"start":"2021-04-08 11:00:00",
"end":"2021-04-08 00:00:00"
},
{
"title":"Meeting with Mike",
"start":"2021-04-13 00:00:00",
"end":"2021-04-13 00:00:00"
}]
yet still I get this error for whatever reason
What could be the issue here?
==edit
+Is the error generated in FullCalendar code?
Yes.
+Does leaving out the event feed property in calendar options prevent the error?
Yes.
+Did testing confirm that the JSON posted is what the server returns from a GET request to the server with start and end values in the query component?
Yes.
+Did you test other things to rule them out as contributing to the error?
I've run out of ideas.
I've done a bit more digging and found out that this message doesn't always show because of a JSON error;
https://github.com/fullcalendar/fullcalendar/issues/4692
https://github.com/fullcalendar/fullcalendar/issues/4952
I rechecked the files, turns out the JSON file is at fault since it somehow includes a script tag sent by CodeIgniter's debugbar.
[{"title":"aaa22","start":"2021-04-01","end":"2021-04-01","id":"4"},{"title":"aaaeeee","start":"2021-03-30","end":"2021-03-30","id":"48"},{"title":"beep boop","start":"2021-03-31","end":"2021-03-31","id":"54"},{"title":"lorem ipsum edit","start":"2021-04-06","end":"2021-04-06","id":"55"}]
<script type="text/javascript" id="debugbar_loader" data-time="1618658976" src="localhost/myapp/?debugbar"></script><script type="text/javascript" id="debugbar_dynamic_script"></script><style type="text/css" id="debugbar_dynamic_style"></style>
I have no idea how this is happening but I'll have to look into it.
EDIT:
You can turn of debugging by going in Config/Boot/development.php and adding define('CI_DEBUG', false). It's running fine now.

how to set local notification in cordova every day at a particular time

I want to give local notification at 7:00 am every day using cordova local notification plugin but in the documentation it is not specified how to set time for a repeating notification
$cordovaLocalNotification.schedule({
id: 3,
title: 'Warning',
text: 'Dont fall asleep',
every: 'minute'
}).then(function (result) {
console.log('Notification 3 triggered');
});
If you are using cordova-plugin-local-notifications, I think It should be:
var date = new Date()
date.setDate(date.getDate()+1);
date.setHours(7);
date.setMinutes(0);
date.setSeconds(0);
$cordovaLocalNotification.schedule({
id: 3,
title: 'Warning',
text: 'Dont fall asleep',
at: date,
every: 'day'
}).then(function (result) {
console.log('Notification 3 triggered');
});
This should schedule a notification the next day at 7, that will be repeated every day, but I couldn't try it, I'm sorry.
The property for setting the time is firstAt. You can find out the documentation about the plugin here.

Put json string into a javascript variable json

I have this in my console chrome:
[{"id":40,"endDate":"2017-04-22","dataA":"2017-04-19","nrC":2,"type":"CO","dataD":"2017-04-19","startDate":"2017-04-20"},{"id":40,"endDate":"2017-04-26","dataA":"2017-04-26","nrC":4,"tyoe":"CP","dataD":"2017-04-23","startDate":"2017-04-25"},
This json string is comming from the servlet that calls DAO class to take the information from db.
So, this string is (dynamically) passed into a jsp page from request session...and i put it into var DAYS = '${jsonArrayString}'; then console.log(DAYS); then it prints that json string above.
So...it can print more data then two.
It has to be put into a javascript variable loke this:
var DAYS = '${jsonArrayString}'; //That's what's on my console..and it comes from session into this jsp page
I think it has to be iterated through a foreach and print it in that format.
var USER_DAYS = [
{
id: value from jsonArrayString,
date: value from jsonArrayString,
title: value from jsonArrayString,
start: new Date(value from jsonArrayString),
end: new Date(value from jsonArrayString),
allDay: true,
className: 'done'
},
];
I tried to put the values ​​manually and it works...like this:
var USER_DAYS = [
{
id: 1,
date: '2017-04-05',
title: 'CO',
start: new Date(2017, 3, 5),
end: new Date(2017, 3, 7),
allDay: true,
className: 'done'
},
I don't know hot to put the values from that json string(
Which can be anythong ... more than 2 records)...that why I need to iterate through that json string.
I want the values to be put only in that format, in that variable (var USER_DAYS)
I tried somthing like this, but it does't work:
<c:forEach items="${jsonArrayString}" var="jsonArrayString">
{
id: '${jsonArrayString.nrC}' ,
date: '${jsonArrayString.dataD}' ,
title: '${jsonArrayString.type}' ,
startDate: '${jsonArrayString.startDate}',
endDate: '${jsonArrayString.endDate}',
allDay: true,
className: 'done'
},
</c:forEach>
];
or like this:
var USER_DAYS = [
{
id: DAYS.nrC,
date: DAYS.dataD,
title: DAYS.type,
start: new Date(DAYS.startDate),
end: new Date(DAYS.endDate),
allDay: true,
className: 'done'
},
];
How to do this?
try parse to json string into json objects.
Example
var USER_DAYS = JSON.parse('${jsonArrayString}')
JavaScript code runs only on the client side, while JSP on the server. You cannot iterate over the JavaScript variable while the page is rendered at the server.
If you want to serve a page that already contains the data, you should pass the data to the JSP page as a model attribute. To do this, take a look at this post.
If you want to populate the page with data after it has been loaded to the browser, you have to use a JavaScript library, such as jQuery. In this case, you have to send a request to the server to get the data in JSON format, and then you can manipulate them on the client side.

Fullcalendar custom view based on month view

I'm using fullcalendar to build up a calendar application for students. I use 4 different views: day, week, month and semester. The semester view is a customized one and it would work fine if it wasn't that by default it has the layout based on the week view and not on the month one that would be much better.
Right now the only thing I do is to specify the extra view in the parameter "view" of the fullcalendar constructor:
views: {
agendaSixMonth: {
type: 'agenda',
duration: { months: 6 },
buttonText: 'Semestre',
start: $.fullCalendar.moment(startSemester),
end: $.fullCalendar.moment(endSemester),
intervalStart: $.fullCalendar.moment(startSemester),
intervalEnd: $.fullCalendar.moment(endSemester),
}
}
I can't find in the documentation how to set the layout of custom views and I was wondering if someone knows if it's possible eventually by setting a parameter in "views" or if I have to code everything from scratch.
Thank you!
It turned out it was as simple as setting type to month :)
Easy peasy!!
Final working solution:
views: {
agendaSixMonth: {
type: 'month',
duration: { months: 6 },
buttonText: 'Semestre',
start: $.fullCalendar.moment(startSemester),
end: $.fullCalendar.moment(endSemester),
intervalStart: $.fullCalendar.moment(startSemester),
intervalEnd: $.fullCalendar.moment(endSemester),
}
}

extjs 4 form loadRecord won't actually load it

I've upgraded my project from 4.0.7 to latest: 4.2.1 and I noticed all my forms stopped loading the record. If I open an update form on some user the form remains blank where in 4.0.7 works.
I'm using:
var form = Ext.create('Ext.form.Panel', {
.......
form.on("render", function(form) {
form.loadRecord(win.record);
}, this);
A console.log on the record itself returns:
constructor {raw: Object, modified: Object, data: Object, hasListeners: HasListeners, events: Object…}
data: Object
active: 1
date_added: Sun Aug 04 2013 19:32:40 GMT+0300 (EEST)
email: "xxxxxxxxxx#gmail.com"
id: 1636
username: "xxxxxxxx"
__proto__: Object
events: Object
hasListeners: HasListeners
id: "AP.model.User-1636"
index: 1
internalId: 1636
modified: Object
phantom: false
raw: Object
store: constructor
stores: Array[1]
__proto__: Object
I can see the data holding the right values but I don't know why isn't the record loaded in the form. I know I can use the url param on the form itself and load the record but I prefer knowing if something changed in the way one should use loadRecord on a form.
Much appreciated
I think your problem is the event. Try to load the form on 'afterrender':
form.on("afterrender", function(form) {
form.loadRecord(win.record);
}, this);

Categories