I'm implementing fullcalendar and struggling with a timezone issue.
Here is the code:
$('#calendar').fullCalendar({ //re-initialize the calendar
header: h,
defaultView: 'agendaWeek', // change default view with available options from http://arshaw.com/fullcalendar/docs/views/Available_Views/
slotMinutes: 15,
editable: true,
lang: 'pl',
timezone: 'Europe/Warsaw',
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;
var endDate = new Date(date);
endDate.setMinutes(endDate.getMinutes() + 70);
copiedEventObject.end = endDate;
alert(date);
alert(endDate);
//copiedEventObject.allDay = allDay;
copiedEventObject.className = $(this).attr("data-class");
// 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();
}
},
});
If I create new event by dropping it what I get is a date-time with GMT timezone, where as I should be set to CET, please help how to rectify the drop event time zone setting.
I had a similar issue. Setting the calendar property to ** timeZone: 'none' **. You will need to specify the timezone short codes in the datetime string otherwise.
Related
I have used a button for inserting events but when i click button again it inserts again and created a duplicate copies of events. Is there any way to only insert latest events.
{
var request;
for (var j = 0; j < this.state.syncEvent.length; j++) {
console.log("J loop", this.state.syncEvent[j]);
request = function (resource) {
return gapi.client.calendar.events.insert({
'calendarId': 'primary',
'eventId': resource
});
}(this.state.syncEvent[j]);
request.execute(function (resp: any) {
console.log(resp);
});
}
}
If you are inserting an event with a predefined event id - check first if an event with this id already exists
First of all, there are some problems with your code.
Have a look at the Javasript sample in the documentation:
The correct syntax would be:
var request = gapi.client.calendar.events.insert({
'calendarId': 'primary',
'resource': event
});
whereby event is the event resource of type
var event = {
...
'start': {
'dateTime': '2015-05-28T09:00:00-07:00',
'timeZone': 'America/Los_Angeles'
},
'end': {
'dateTime': '2015-05-28T17:00:00-07:00',
'timeZone': 'America/Los_Angeles'
},
'id': SPECIFY_HERE_THE_EVENT_ID,
...
};
The event resource must contain the Required Properties end and start, in addition you specify additional properties mentioned in the documentaiton of the method like e.g. summary or id.
Now, since from your code snippet one can deduct that you pass the event id to your function - before inserting the event, you can check with the method Events: get either an event with the given id already exists.
Alternatively, you can also use the method Events: list to retrieve the already existing events in your calendar. Thereby you can use the query parameter q to filter by e.g. summary or you can query by specifying the paramters timeMax and timeMin - depending on your use case.
All you need to do is to implement a conditional statement to create a new event only if Events: get or Events: list did not return an already existing event with the specified parameters.
I am using the calendar now, and it works well.
I want to add a database record every time an event is moved/resized/etc. to keep a history log.
Once an event is moved for instance, I will use ajax to add the information to my db, but I don't know how to capture the original time and new time.
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format());
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
Does the delta value hold this information so I can use it for my records?
I would like to ask about datepicker. I am currently developing a website where university students have to pick their own Thursday to hear a talk about career.
First of all, I have managed to disable all days except Thursday. The code I wrote stated below :
<script>
$( function()
{
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd', minDate: 0, maxDate:
'2018-12-15', beforeShowDay: function(date){var day = date.getDay();return
[day == 4,'disable'];
}});
} );
</script>
But now I would to disable a certain Thursday for example next Thursday which is:
'yy-mm-dd' = '2017-08-17'
Can someone explain to me how or where should I do the modification to the code which can allow me to disable a certain Thursday?
Refer this image for my datepicker https://drive.google.com/file/d/0ByJlnNeKIynkQ3IzRTN2cHg4WFE/view?usp=sharing
Use like this:
Date.getDay() returns a value in the range 0-6, not 1-7.
beforeShowDay: function(date) {
return [date.getDay() === 0,''];
}
you can still use the onBeforeShowDay, since it will get called before the datepicker is displayed, because changing months will make the datepicker to render again.
You can use an array that stores the list of dates and change this based on the result from your ajax call. e.g:
//at first only september dates will be disabled.
var array = ["2017-08-10","2017-08-17","2017-08-24"];
$('input').datepicker({
onChangeMonthYear: function(year, month, inst) {
// Perform AJAX call and get the list
//override the array, and now the october dates will be disabled.
$.ajax({
url: ajaxUrl,
type: "post",
data: serializedData,
async: false,
success: function (data) {
array = data; //["2017-08-10","2017-08-17","2017-08-24"];
}
});
},
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [array.indexOf(string) == -1 ]
}
});
I'm using a SharePoint 2013 list as the events source. Nothing special there as it's used as a data table.
I'm using the Client Javascript API and getting items (from the list) with the function executeQueryAsync
Here is the code
var clientContext = new SP.ClientContext.get_current();
oWebsite = clientContext.get_web();
var oList = oWebsite.get_lists().getByTitle('EventsList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><ViewFields><FieldRefName='ID' /><FieldRef Name='Title' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /></ViewFields><Query><Where><And><Geq><FieldRef Name='EventDate'/><Value Type='DateTime'>" + startDate + "</Value></Geq><Leq><FieldRef Name='EndDate'/><Value Type='DateTime'>" + endDate + "</Value></Leq></And></Where></Query></View>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
The problem I'm facing is that the deletegatefunction triggers only when the AsyncQuery is complete. The onQuerySucceeded function is as followed
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
eventSourceArray.push({ title: 'Test Event', start: '2017-02-08' });
while (listItemEnumerator.moveNext()) {
alert(listItemEnumerator);
var oListItem = listItemEnumerator.get_current();
listItemInfo += '\nID: ' + oListItem.get_id() +
alert(oListItem.get_item('Title'));
}
}
The "alert" is only for testing purpose. If I put alerts into this function, it is displayed. However the event that is pushed into the source is not displayed. I'm looking for a way to refresh the calendar once the query is complete.
UPDATE:
The events I want to show are populated asynchronously in the eventSourceArray which is used as the Events source (see the code below)
jQuery('#calendrier').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: today,
lang: 'fr-ca',
buttonIcons: true,
weekNumbers: false,
editable: false,
eventLimit: true,
events: eventSourceArray
});
Now I'm looking for a way to reload the calendar or have the added events in the Array to show even if the page is already loaded.
UPDATE:
I tried this, but it has no effect. https://fullcalendar.io/docs/event_data/addEventSource/
jQuery('#calendrier').fullCalendar('refetchEventSources', eventSourceArray);
I added an alert to display the length of the array (eventSourceArray) and the items are all there)
UPDATE:
Tried resetting the events with my array
events: eventSourceArray
and then calling the refetchEvents https://fullcalendar.io/docs/event_data/refetchEvents/
jQuery('#calendrier').fullCalendar('refetchEvents')
This did the trick at the end of the OnQuerySucceed function
jQuery('#calendrier').fullCalendar('removeEventSources', eventSourceArray)
jQuery('#calendrier').fullCalendar('addEventSource', eventSourceArray)
I have just started to use ember.js. I have two models in my application. One that holds data and one that holds this data edited by user. I bind them using one-way binding.
App.ViewModel = Ember.Object.create({
title:'title',
text:'text',
)};
App.EditModel = Ember.Object.create({
titleBinding: Ember.Binding.oneWay('App.ViewModel.title'),
textBinding: Ember.Binding.oneWay('App.ViewModel.text'),
)};
I let a user edit the data in EditModel model. But if the user discard the changes I want to be able to set the values back to the state before editing, ie. to the values in ViewModel.
Is there a way to rebind those properties? Or to manualy rise change event on properties in ViewModel so EditModel gets updated? Or any other approach to my problem?
You could create a custom Mixin which handles the reset for a model, see http://jsfiddle.net/pangratz666/CjB4S/
App.Editable = Ember.Mixin.create({
startEditing: function() {
var propertyNames = this.get('propertyNames');
var props = this.getProperties.apply(this, propertyNames);
this.set('origProps', props);
},
reset: function() {
var props = this.get('origProps');
Ember.setProperties(this, props);
}
});
App.myModel = Ember.Object.create(App.Editable, {
propertyNames: ['title', 'text'],
title: 'le title',
text: 'le text'
});
And later in the views you just invoke the startEditing when you want to take a snapshot of the current values and reset when you want to reset to the previous snapshot of the values.