i am new developer and i want to make an app in cakephp 3.7 thas uses jquery full calendar plugin for reservations.In my database is stored a specific date range (starting date and ending date fields).I want to use this date range in my calendar so that if a user clicks on a specific day on the callendar that is out of this date range, the app will display a messange informing the user that he cannot make a reservation for that day!
Any useful suggestions on who i will handle on this ??
Thank you!!
I have done it using the cakephp 3.6.
Generic steps that you would follow:
You will include your full calendar js and jquery in the 'full
calendar' template
Then initialise your fullcalendar. Now you should see the calendar.
Once done, from the fullcalendar make an ajax call to your controller to get the events. eg.
var fcSources = {
loadEvents: {
url: //your controller action,
type: "GET",
cache: true,
timezone: "Europe/London",
className: "events",
dataType: "json",
success: function (data) {
return data.events;
}
},
}
Later part can be done by simply checking the date value against current date.
Related
I have created one google calendar with my gmail account and I want to display that calendar in my website.
All Events related to that calender's are inserted via google calendar API using .Net Library.
It shows all events in website.but when i click on print and all events are not display in print preview.
Is there any parameter missing while calling Insert Event API?
I was having this problem with events created in a Chrome Extension. I'll spare you the code for the token, but I think it's enough that the event is created without any problems, yet refuses to print.
Desired behaviour: create event that can be printed.
Specific Error: event is created, but can not be printed.
Code:
var copyInit = {
'method': 'POST',
'async': true,
'headers': {
'Authorization': 'Bearer ' + Items.access_token,
'Content-Type': 'application/json'
},
'contentType': 'json',
'body': dataJson
};
dataJson:
"{"start":{"date":"2019-04-22"},"end":{"date":"2019-04-22"},"summary":"test"}"
API Call:
var url = 'https://www.googleapis.com/calendar/v3/calendars/' + calId + '/events?key=AIzaSyDfX9-blah9KoxzvGu3IzA1zu0oDQ-cJfw';
fetch(url, copyInit)
After much head scratching it turns out that although the Google Calendar API allows you to create all day events using the same start date and end date for all day events (using YYYY-MM-DD), such events can not be printed, and when shared will have an end date previous to the start date...
The solution is to use the following day as the end date for all day events:
"{"start":{"date":"2019-04-22"},"end":{"date":"2019-04-23"},"summary":"works!"}"
I am using fullCalendar plugin to display events from ASP.NET ASMX web service. JSON data is fetched correct and displayed ok in the console. But events are not rendered on the calendar view. What am I missing?
$('#divcalendar').fullCalendar({
defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function (start, end, timezone,callback) {
$.ajax({
type: "POST",
url: 'Webservice.asmx/ListEvents',
cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var event = [];
$(data.d).each(function () {
event.push({
title: this.Title,
start: this.Start,
end: this.End
});
});
console.log(event);
callback(event);
},
error: function (jqXHR, textStatus, errorThrown) {
alert('There was an error');
}
});
}
});
[WebMethod]
public CalendarEvent[] ListEvents()
{
DateTime epoc = new DateTime(1970, 1, 1);
return new CalendarEvent[]
{
new CalendarEvent { Title = "Event 1", Start = new DateTime(2018,3,9,16,0,0).Subtract(epoc).TotalSeconds, End = new DateTime(2018,3,9,17,0,0).Subtract(epoc).TotalSeconds},
new CalendarEvent { Title = "Event 2", Start = new DateTime(2018,3,12,12,0,0).Subtract(epoc).TotalSeconds, End = new DateTime(2018,3,12,13,0,0).Subtract(epoc).TotalSeconds}
};
}
Console output from webservice
{"d":[{"__type":"CalendarEvent","End":1520614800,"Start":1520611200,"Title":"Event 1"},{"__type":"CalendarEvent","End":1520859600,"Start":1520856000,"Title":"Event 2"}]}
I think your dates are being entered into the calendar, but not in the place you intended.
Although you haven't mentioned it explicitly, I would strongly suspect that the timestamps you're outputting for your start and end dates are specified in seconds.
Now, fullCalendar uses momentJS to parse any date strings or timestamps supplied to it. Alternatively it can accept ready-made momentJS or JS Date objects.
momentJS can parse timestamps automatically through the momentJS constructor (which fullCalendar is calling when it receives your timestamp value), but it assumes the value is given in milliseconds, not seconds.
Therefore when you supply it with, for instance, 1520611200 (the start date of your first event), it interprets that in milliseconds and the resulting date is 1970-01-18 14:23:31.
If you want to specify the date in seconds you have to use the moment.unix() method instead. Using this method, your timestamp is instead interpreted as 2018-03-09 16:00:00, which I assume is what you intended.
See http://jsfiddle.net/Loccoxds/1/ for a demo to see the difference in how momentJS parses one of your values.
To get your code working, the simplest way is to do this:
success: function (data) {
var event = [];
$(data.d).each(function () {
event.push({
title: this.Title,
start: moment.unix(this.Start),
end: moment.unix(this.End)
});
});
console.log(event);
callback(event);
},
This way, you supply a ready-made momentJS object to fullCalendar, having correctly parsed the timestamp.
See http://momentjs.com/docs/#/parsing/unix-timestamp-milliseconds/ for more details about parsing timestamps in momentJS
P.S. Alternatively of course you could change your asmx service to output the dates in a format momentJS can parse automatically, such as a timestamp in milliseconds, or an ISO8601-formatted date string - see http://momentjs.com/docs/#/parsing/string/ for details of that.
P.P.S. ASMX is pretty much a legacy technology within .NET now. You should consider using WCF or Web API instead. Microsoft recommends not to create new code using ASMX.
I'm using a Kendo Grid pointed to an ASP.NET Web API OData controller. I'm wondering if it's possible to customize/overwrite the generated OData URL that Kendo's DataSource generates? My issue is my date fields are DateTimeOffset and I'm trying to sort by those fields, however Kendo's model fields only support string/bool/number/date, nothing for DateTimeOffset. The URL it generates for date fields is:
http://localhost/api/odata/customers?%24inlinecount=allpages&%24top=10&%24filter=(CreatedDate+ge+datetime%272015-01-01T00%3A00%3A00%27) which fails.
It should be:
http://localhost:900/api/odata/customers?%24inlinecount=allpages&%24top=10&%24filter=(CreatedDate+ge+datetimeoffset%272015-01-01T00%3A00%3A00%27)
Is it possible to force it to use datetimeoffset instead?
You are probably not using the right "odata" transport. Try with "odata-v4". More info is available here.
For my ASP.NET Web API 2's OData V4 controllers, I actually need this URL format:
http://localhost:XX/odata/Things?$filter=DteTmOfsField eq 2012-12-03T07:16:23Z
And this javascript is working pretty good for me:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: "/odata/Things/",
dataType: "json"
},
parameterMap: function (options,type) {
var paramMap = kendo.data.transports.odata.parameterMap(options, type);
if (paramMap.$filter) {
paramMap.$filter = paramMap.$filter.replace(/datetime'([-0-9T:]{19})'/gi, "$1Z");
}
paramMap.$count = true;
delete paramMap.$inlinecount; // <-- remove inlinecount parameter
delete paramMap.$format; // <-- remove format parameter
return paramMap;
}
},
I have an requirement to show users a pop up when there is one minute left to session expires time. Suppose session expiration time is 5 minutes and I need to show a pop up that "Your session will expire in next one minute" please click here if you want to continue otherwise click cancel. So, if user clicks ok, time should again refreshed automatically and if cancelled then no need to do any thing .
For this I have done something like this in my Shared folder in Layout
var myVar = setInterval(function () { myTimer() }, 240000);
function myTimer() {
var r = confirm("Session will expire in a minute. will you like to continue working?");
if (r == true) {
var _Id = $("#Id").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../Home/ResetUser",
data: "{'User_ID':'" + _Id + "'}",
dataType: "json",
success: function (data) {
if (data.Data == 'Done') {
}
},
error: function (xhr) {
}
});
}
else {
window.clearInterval(myVar);
}
But I have one problem and that is I do not have the same layout derived in all the pages. Some modules have different layout and some pages do not need any layout.So, I need to keep that script running differently for different layouts or the pages which do not use the layouts.
Will it work fine if I keep the script differently for different layouts?
Also Suppose I have logged in and I set a session variable. Now time is set to 5 minutes
and user come to home page which is not using the layout where I kept the above script.
I have the script added differently in this page and script function time starts..
but then user went to another page then session time will refreshed?
and I have to load my above script function on that page?
Am I doing the right things.
Hi You can write your script in _viewstart.cshtml file.
This will be executed for each request irrespective of the Layout page you are using
but then user went to another page then session time will refreshed? and I have to load my above script function on that page?
Yes when you user refresh the page or request the server again the session time will be reset.
This is the one way to achieve your requirement.
Can someone help me understand how I can pass the start date into the calendar. I have created a Delivery Scheduler calendar and I display the delivery details in a table under the calends that is feed via the database. This requires me to refresh the page when a user select a calendar day to load the table information. I can figure out how to start the calendar on a starting date that is passed into the page.
Seems like this would be easy but I am doing something wrong.
$('#calendar').fullCalendar(Options);
$('#calendar').fullCalendar('gotoDate', '2012-10-21');
Sample based on documentation http://arshaw.com/fullcalendar/docs/current_date/gotoDate/
Remember that month is 0-based, so 10 means November.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
events:[
{ title:'All Day Event', start:new Date(2012, 10, 20)},
{ title:'Long Event', start:new Date(2012, 10, 21), end:new Date(2012, 10, 22)}
]
});
$('#calendar').fullCalendar('gotoDate', 2012, 10, 21);
});
Thank you Biesior for your helpful answer. I was able to use your suggested code to get the behavior I was looking for.
While using the approach above, I notice that Firebug's console shows two AJAX data requests being executed simultaneously, one for the view associated with the current date, and one for the view associated with the specified gotoDate.
There doesn't appear to be any additional delay from the user's perspective, and the calendar displays the requested view from the start. However, 'loading' callbacks will be called multiple times which might cause strange behavior in certain circumstances. There may also be other undesired results associated with the superfluous AJAX request for the current date.
I was able to avoid the unnecessary AJAX request by initializing the calendar without an event source, then moving to the desired date as shown by Biesior above, and then adding the event source. The sequence is shown below. I've removed some unrelated FullCalendar options and callbacks to keep it concise. There are some additional AJAX parameters, and some PHP, but the important thing to notice is when the event source is specified.
The original code results in two simultaneous AJAX requests:
$('#calendar').fullCalendar({
events: {
url:'/Services/GetEvents.php',
type: 'POST',
data: {
lat: <?=$venLatitude?>,
lon: <?=$venLongitude?>,
userID: <?=$userID?>,
distance: <?=$distance?>
}
}
})
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
This adjustment results in only the desired AJAX request:
$('#calendar').fullCalendar();
$('#calendar').fullCalendar('gotoDate', <?=(int)substr($startDate,0,4)?>, <?=((int)substr($startDate,5,2))-1?>);
$('#calendar').fullCalendar('addEventSource', {
url:'/Services/GetEvents.php',
type: 'POST',
data: {
lat: <?=$venLatitude?>,
lon: <?=$venLongitude?>,
userID: <?=$userID?>,
distance: <?=$distance?>
}
});