I am developing a project with AngularJS and using Angular-UI UI-Calendar. In my code I initialize eventSources model for ui-calendar to empty array ([]) and set ui-config "events parameter" to a custom function. That function makes an $http request and then calls the callback function given to the events function.
However, I found out that when I load the page or change the month viewed by left or right buttons, events function called twice. How can I solve that?
Here is my code:
function CalendarCtrl($scope, Data){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Stores all events
var events = [];
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
month: "Ay",
week: "Hafta",
day: "Gün",
list: "Ajanda"
},
allDayText: "Tüm gün",
eventLimitText: "daha fazla",
firstDay: 1,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
lazyFetching: true,
// Here listen for calendar change events
events: getEvents
}
};
// For angular ui-calendar element
$scope.eventSources = [];
// Calendar event handlers
function getEvents(from, to, callback){
console.log(from); // For test purposes
// Request for data from server and when it comes, call callback to update calendar
Data.calendar.get(moment(from).unix(), moment(to).unix()).then(function(events){
angular.forEach(events, function(event){
event.start = moment.unix(event.start);
if(event.end){
event.end = moment.unix(event.end);
}
else{
delete event.end;
}
var d = event.start;
if(d.hour() == 0 && d.minute() == 0 && d.second() == 0){
event.allDay = true;
}
if(event.important){
event.className = "important-event";
}
event.editable = true;
});
callback(events);
});
}
I have the solution.
Instead of registering an event handler to $scope.uiConfig.calendar.events, register that same function to $scope.eventSources array. Like that:
$scope.eventSources = [getEvents];
Whenever view changes and calendar needs data it will look at the $scope.eventSources elements. And if an element is a function it will be called and results will be shown in calendar.
We ran into a similar problem in a project and our solution was also in the eventSource initialization putting an empty object inside the array.
$scope.eventSources = [{}];
Related
So I have a calendar displayed on one of my webform pages. Works great and serves purpose for end users. However to add/edit events I create a postback that resets the view to its default. Only an issue for the administrator but he will often will add entries a year or more in advance making this a nuisance.
To try and solve this I added a hidden textbox to store the start date of the calendar view.
<asp:TextBox ID="txtSaveTheDate" style="display:none;" runat="server"></asp:TextBox>
Then in each event I update the date to the current view. You will never get a postback unless you have triggered an event first)
eventClick: function (calEvent, jsEvent, view) {
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
...
},
I then use the defaultDate attribute to use this date to show the last shown date range in the calendar.
defaultDate: moment(SaveTheDate),
This works 80%.
When I click on the calendar to create an event the proper date moves into the textbox.
However, once the page postback The calendar return to one month before where it should. This happens if you are in the present, past or future. The only time it goes to the proper date is Jan 2023, for whatever reason that month works. The only clue is that the display starts on the 1st of the month unlike most.
Any Tips would be appreciated including alternate techniques.
Full procedure for reference.
jQuery(document).ready(function () {
SaveTheDate = document.getElementById('<%=txtSaveTheDate.ClientID%>').value;
if (SaveTheDate == '') {
SaveTheDate = new Date();
};
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "TrainingCalendar.aspx/GetEvents",
dataType: "json",
success: function (data) {
$('div[id*=fullcal]').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultDate: moment(SaveTheDate),
displayEventTime: false,
events: $.map(data.d, function (item, i) {
var event = new Object();
event.id = item.EventID
event.start = new Date(item.StartDate);
event.end = new Date(item.EndDate);
event.title = item.EventName;
event.backgroundColor = item.Color;
event.textColor = item.TextColor;
return event;
}),
eventClick: function (calEvent, jsEvent, view) {
//Let's make sure they have permissions to edit the page
if (document.getElementById('<%=btnNotes.ClientID%>')) {
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
document.getElementById('<%=txtEventId.ClientID%>').value = calEvent.id;
document.getElementById('<%=txtEventName.ClientID%>').value = calEvent.title;
var date = new Date(calEvent.start);
document.getElementById('<%=txtDate.ClientID%>').value = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();
$('#EventModal').modal('show');
}
},
dayClick: function (dt, jsEvent, view) {
//Let's make sure they have permissions to edit the page
if (document.getElementById('<%=btnNotes.ClientID%>')) {
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
document.getElementById('<%=ddlNewEventName.ClientID%>').value = '0';
document.getElementById('<%=txtNewEventName.ClientID%>').value = '';
document.getElementById('<%=txtNewDate.ClientID%>').value = dt.format('MM/DD/YYYY');
$('#NewEventModal').modal('show');
}
}
});
$("div[id=loading]").hide();
$("div[id=fullcal]").show();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
So I have discovered by hardcoding some values that "defaultDate" needs to see the first day of the month's view, not the first day displayed in the view.
This will vary based on the version you are on but...
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
Returns the first date on the calendar
Changing from start to intervalStart gets you the first day of the month.
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.intervalStart.format();
The syntax is different based on the version, intervalStart is compatible for version 3.
Here are the view objects available, you can select your version to change the content.
https://fullcalendar.io/docs/v3/view-object
I have the following function for pulling data from a php json_encode for use in FullCalendar.
eventDrop: function(info) {
$.get( "php/get-events.php", function( data ) {
// data is your result
// Find the value for editable where the event id = the event you are trying to move
rawdata = JSON.parse(data);
editable = rawdata.find(x => x.id === info.event.id).editable;
start= info.event.start.toISOString();
start = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
end= info.event.end.toISOString();
end = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
title = info.event.title;
id = info.event.id;
});
}
I will use very similar code for the eventResize function within fullcalendar, so I would like to extract this part
$.get( "php/get-events.php", function( data ) {
// data is your result
// Find the value for editable where the event id = the event you are trying to move
rawdata = JSON.parse(data);
into it's own function (not 100% sure I'm using the right terminology here?) I seen this answer jQuery - Passing variable within a function to another function about how to pass variables in the global scope, so I tried to move my above code out of eventDrop like so
$.get( "php/get-events.php", function( data ) {
// data is your result
// Find the value for editable where the event id = the event you are trying to move
rawdata = JSON.parse(data);
});
eventDrop: function(info) {
But this gives me an error
Uncaught SyntaxError: Unexpected token '.'
Ideally I would like to do the json extract using the $.get only one time throughout my page, and then reference the rawdata global variable to read the information, is this possible?
My full solution at current is
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var today = moment().day();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: today,
editable: true,
$.get( "php/get-events.php", function( data ) {
// data is your result
// Find the value for editable where the event id = the event you are trying to move
rawdata = JSON.parse(data);
});
eventDrop: function(info) {
editable = rawdata.find(x => x.id === info.event.id).editable;
start= info.event.start.toISOString();
start = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
end= info.event.end.toISOString();
end = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
title = info.event.title;
id = info.event.id;
if (!confirm("Confirm you want to change " + info.event.title + " to " + info.event.start)) {
info.revert();
}
else{
if(editable === 'Y'){
$.ajax({
url: 'php/calendarupdate.php',
data: 'title=' + info.event.title + '&start='+ start +'&end=' + end + '&id=' + info.event.id ,
type: "POST"
});
}
else{
alert("Can only modify this calendar event if you created it. Please ask the event creator to modify.");
calendar.refetchEvents();
}
}
},
navLinks: true, // can click day/week names to navigate views
dayMaxEvents: true, // allow "more" link when too many events
events: {
url: '/php/get-events.php',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
},
loading: function(bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
}
});
calendar.render();
});
</script>
Problem solved, thanks to #Patrick Evans for the suggestion, I was adding the get call to the middle of my code, where I had to add it at the end, after the ";" to end the line. I can now reference "rawdata" variable within EventDrop.
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var today = moment().day();
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: today,
editable: true,
eventDrop: function(info) {
editable = rawdata.find(x => x.id === info.event.id).editable;
start= info.event.start.toISOString();
start = moment(info.event.start).format('Y-MM-DD HH:mm:ss');
end= info.event.end.toISOString();
end = moment(info.event.end).format('Y-MM-DD HH:mm:ss');
title = info.event.title;
id = info.event.id;
if (!confirm("Confirm you want to change " + info.event.title + " to " + info.event.start)) {
info.revert();
}
else{
if(editable === 'Y'){
$.ajax({
url: 'php/calendarupdate.php',
data: 'title=' + info.event.title + '&start='+ start +'&end=' + end + '&id=' + info.event.id ,
type: "POST"
});
}
else{
alert("Can only modify this calendar event if you created it. Please ask the event creator to modify.");
calendar.refetchEvents();
}
}
},
navLinks: true, // can click day/week names to navigate views
dayMaxEvents: true, // allow "more" link when too many events
events: {
url: '/php/get-events.php',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
},
loading: function(bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
}
});
$.get( "php/get-events.php", function( data ) {
// data is your result
// Find the value for editable where the event id = the event you are trying to move
rawdata = JSON.parse(data);
});
calendar.render();
});
</script>
Is there a way to change the start time of an Event, wich I draged into the calendar.
The Event comes from an external Source like this:
//initialize the external events
$('#external-events .fc-event').each(function() {
/* // store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
*/
var eventObject = {
title: $.trim($(this).text()), // use the element's text as the event title
id: $(this).data('id')
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
I want to change/update the start Time and Title - if necessary - of the Event in a modal Dialog. It seems to work fine, but everytime I add another Event by dragging and want to change it, it changes all other dragged Events, too.
eventClick: function(calEvent, jsEvent, view) {
//Sending data to modal:
$('#modal').modal('show');
$("#input_title").val(calEvent.title);
var my_time = moment(calEvent.start).format('LT');
$("#input_time").val(my_time);
var my_date = moment(calEvent.start).format("YYYY-MM-DD");
$("#input_date").val(my_date);
// waiting for button 'save' click:
$('.btn-primary').on('click', function (myEvent) {
calEvent.title = $("#input_title").val();
var my_input_time = $("#input_time").val();
var momentTimeObj = moment(my_input_time, 'HH:mm:ss');
var momentTimeString = momentTimeObj.format('HH:mm:ss');
var my_input_date = $("#input_date").val();
var momentDateObj = moment(my_input_date, 'YYYY-MM-DD');
var momentDateString = momentDateObj.format('YYYY-MM-DD');
calEvent.start = moment(momentDateString + ' ' + momentTimeString, "YYYY-MM-DD HH:mm");
$('#calendar').fullCalendar('updateEvent', calEvent);
$('#calendar').fullCalendar('unselect');
$('#modal').modal('hide');
});
}
What I am doing wrong?
I finally figured out, how to do this. In my example I'm able to change the event end-time by calculating the duration between start and end and diplay it as HH:mm. So the User can change the duration like 01:00 (hour). Also I add some additional fields like "information" and "color". After the changes in a modal (bootstrap) are made, I write it back to the calendar. Maybe there are better solutions for this, but for me it works fine.
// initialize the external events
$('#external-events .fc-event').each(function() {
// Start Time: String to Date
var my_start_time = new Date (new Date().toDateString() + ' ' + $(this).data('start'));
var start_time = moment(my_start_time).toDate();
// End Time: String to Date -> Date to Decimal
var my_dur_time = new Date (new Date().toDateString() + ' ' + $(this).data('duration'));
var dur_time = moment(my_dur_time).format('HH:mm');
dur_time = moment.duration(dur_time).asHours();
//Add Decimal End Time to Start Time
var end_time = moment(start_time).add(dur_time, 'hours');
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
start: $(this).data('start'),
end: end_time,
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
$('#calendar').fullCalendar({
//Other calendar settings here ...
eventClick: function(event, element) {
curr_event = event;
var inp_start_time = moment(event.start).format();
var inp_end_time = moment(event.end).format();
var diff_time = moment(moment(inp_end_time),'mm').diff(moment(inp_start_time),'mm');
diff_time = moment.duration(diff_time, "milliseconds");
diff_time = moment.utc(moment.duration(diff_time).asMilliseconds()).format("HH:mm");
var my_time = moment(event.start).format('HH:mm');
var my_date = moment(event.start).format('DD.MM.YYYY');
var my_hidden_date = moment(event.start).format('YYYY-MM-DD');
$("#inp_time").val(my_time);
$("#inp_date").val(my_date);
$("#inp_hidden_date").val(my_hidden_date);
$("#inp_title").val(event.title);
$("#inp_duration").val(diff_time);
$("#inp_information").val(event.information);
$("#inp_color").val(event.color);
$('#modal').modal('show');
}
});
$("#button_ok").click(function (myevent) {
var my_input_time = $("#inp_time").val();
var momentTimeObj = moment(my_input_time, 'HH:mm:ss');
var momentTimeString = momentTimeObj.format('HH:mm:ss');
var my_input_date = $("#inp_hidden_date").val();
var momentDateObj = moment(my_input_date, 'YYYY-MM-DD');
var momentDateString = momentDateObj.format('YYYY-MM-DD');
var datetime = moment(momentDateString + ' ' + momentTimeString, "YYYY-MM-DD HH:mm");
var my_title = $("#inp_title").val();
var my_duration = $("#inp_duration").val();
var new_dur_time = moment.duration(my_duration).asHours();
//Add Decimal End Time to Start Time
var new_end_time = moment(datetime).add(new_dur_time, 'hours');
var new_information = $("#inp_information").val();
var new_color = $("#inp_color").val();
$.extend(curr_event, {
title: my_title,
start: datetime,
end: new_end_time,
information: new_information,
color: new_color
});
$("#calendar").fullCalendar('updateEvent', curr_event);
});
});
Hope this helps.
Greetings.
I have a MySQL table holding some events to be rendered and a couple PHP pages configured to return those events as JSON objects based on the dates passed to it. When you click or drag an event or calendar date, I have a bootstrap modal that pops up, pre-populated with the information stored in the event (if it was an event you clicked or dragged, otherwise it's just a blank form waiting to add a new event) and when I submit the form, it runs an AJAX query to add/update/delete the event in the MySQL table. Once the AJAX returns successfully, I either call 'removeEvent' and pass it the event id (in case of a delete), call a 'renderEvent' and pass it the object that was used to submit the AJAX query (in case of an add), or both (in case of an update).
For whatever reason, the event never renders correctly using this method. The removeEvent works, and grabs the right event, but the add and update don't render the new event with dates/times. I've tried formatting the start and end in a bunch of different ways, but the event is still rendered incorrectly. Basically, the problem with the rendered event is that it renders it on the correct day, and includes the extra data that I've added, which can be verified by clicking the event and opening the modal, but the start time defaults to midnight of that day, and the end time either doesn't exist, or defaults to midnight of the next day. When I reload the page and it gets the data from PHP, the event is rendered with the correct datetime values.
I've tried logging the event object to the console before rendering it, and I can't find anything that looks out of place, i.e. the output of the event in the console looks the same as the output of one of the JSON objects that are coming out of my PHP page.
Can anybody shine any light on this?
FullCalendar v3.0.1
Scheduler v1.4.0
JQuery v3.1.1
Bootstrap v3.3.7
bootstrap-datetimejs v4.17.43 (https://github.com/Eonasdan/bootstrap-datetimepicker)
The code that is actually rendering the event is in the sendrequest() function, but I'm going to include most of my .js page so you can see what I'm trying to do (I've clipped out a few things to shorten it up, but it's mostly all there)
window.onload = initializepage;
//Calendar documentation: http://fullcalendar.io/docs/
function initializepage()
{
//Build The jQuery Calendar
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
defaultView: 'month',
editable: true,
// When you click on an event, it will call the manageevent function and pass the event object to it
eventClick: function($event)
{
manageevent($event);
},
// When you drag an event, it will move it back to where you dragged it
// after this method executed, the eventClick method above is executed
eventResize: function($event, $delta, revertfunc)
{
manageevent($event);
revertfunc();
},
eventDrop: function($event, $delta, revertfunc)
{
manageevent($event);
revertfunc();
},
eventSources:
[
{
url: 'opscalendar_ajax.php',
},
{
url: 'oncall_ajax.php',
data: {
groupname: 'Ops'
}
}
],
fixedWeekCount: false,
header:
{
left: 'prev,next today',
center: 'title',
right: 'timelineDay,agendaWeek,month,basicYear',
},
height: 600,
resourceGroupField: 'Shifts',
resourceGroupText: 'Shifts',
resources:
[
<!-- deleted for brevity -->
],
selectable: true,
selectHelper: true,
// When you click on a date, or drag across dates, call the addevent function
select: function($start, $end)
{
addevent($start, $end);
$('#calendar').fullCalendar('unselect');
},
views: {
<!-- deleted for brevity -->
},
});
// End of JQuery Calendar
//Some jQuery to make it so that the date picked for end time cannot be before the
//date picked for the start time
$(function () {
$('#starttimepicker').datetimepicker();
$('#endtimepicker').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#starttimepicker").on("dp.change", function (e) {
$('#endtimepicker').data("DateTimePicker").minDate(e.date);
});
});
// Now we assign some buttons to execute functions instead of submitting a form
document.getElementById('addEventBtn').onclick = executemanageevent;
document.getElementById('updateEventBtn').onclick = executemanageevent;
document.getElementById('deleteEventBtn').onclick = executemanageevent;
// Some JQuery to clear out and fields that are populated in the modal.
$("#manageevent").on('hidden.bs.modal', function()
{
// Reset form values
document.getElementById('hiddenid').value = '';
document.getElementById('shiftdropdown').value = '';
document.getElementById('starttime').value = '';
document.getElementById('endtime').value = '';
document.getElementById('name').value = '';
document.getElementById('alldayradio2').checked = 'checked';
document.getElementById('manageeventalert').innerHTML = '';
});
} // End initializepage function
/* function addevent($start, $end)
*
* Populates modal with the dates from user click or drag
* Enables the add and cancel buttons
* Opens the modal so user can see it
*/
function addevent($start, $end)
{
// Populate dates
$('#starttimepicker').data("DateTimePicker").date($start);
$('#endtimepicker').data("DateTimePicker").minDate($start);
$('#endtimepicker').data("DateTimePicker").date($end);
document.getElementById('alldayradio2').checked = 'checked';
// Show Buttons
$('#addEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
// Show Modal
$('#manageevent').modal({backdrop: 'static'});
return false;
}
/* function closemodal()
*
* Called after a successful request - just closes the modal
*/
function closemodal()
{
$('#manageevent').modal('hide')
}
/* function executemanageevent()
*
* When you click any of the buttons (except cancel) this is executed
* First: it creates an object (like an array, just different)
* Second: disable all the buttons so people can't keep clicking
* Third: take all the values from the modal and put them into the object
* Fourth: put an alert in the modal header (there's a div for it) and let them know we're trying their request
* Fifth: send the object to the sendRequest function
*/
function executemanageevent()
{
// First
var $datatopass = {};
$datatopass.mode = this.getAttribute('mode');
// Second
$('#addEventBtn').prop("disabled", true);
$('#updateEventBtn').prop("disabled", true);
$('#deleteEventBtn').prop("disabled", true);
$('#cancel').prop("disabled", true);
// Third
$titleindex = document.getElementById('name').selectedIndex;
$datatopass.title = document.getElementById('name').options[$titleindex].text;
$datatopass.login = document.getElementById('name').value;
$datatopass.start = document.getElementById('starttime').value;
$datatopass.end = document.getElementById('endtime').value;
$datatopass.resourceId = document.getElementById('shiftdropdown').value;
$datatopass.id = document.getElementById('hiddenid').value;
var $allday = document.getElementsByName('alldayradio');
for($i = 0; $i < $allday.length; $i++)
{
if($allday[$i].checked == true)
{
$datatopass.allDay = $allday[$i].value;
}
}
// Fourth
var $infoalert = "<div class='alert alert-info'><strong>Info: </strong>Attempting to submit your request</div>";
document.getElementById('manageeventalert').innerHTML = $infoalert;
// Fifth
$theresults = sendrequest($datatopass);
console.log($datatopass);
return false;
}
/* function manageevent($event)
*
* Manage event is called when you click on an event, or drag an event
* We assume you're going to update, delete, or copy an event and enable all buttons
* once we've set everything up, show the modal.
*/
function manageevent($event)
{
// Get data from event
$title = $event.title;
$login = $event.login;
$start = $event.start;
$end = $event.end;
$allday = $event.allDay;
$resourceId = $event.resourceId;
$id = $event.id;
// Populate modal fields
document.getElementById('hiddenid').value = $id;
document.getElementById('shiftdropdown').value = $resourceId;
$('#starttimepicker').data("DateTimePicker").date($start);
$('#endtimepicker').data("DateTimePicker").minDate($start);
$('#endtimepicker').data("DateTimePicker").date($end);
document.getElementById('name').value = $login;
if($allday == true)
{
document.getElementById('alldayradio1').checked = 'checked';
}
else
{
document.getElementById('alldayradio2').checked = 'checked';
}
// Enable all buttons
$('#addEventBtn').prop("disabled", false);
$('#updateEventBtn').prop("disabled", false);
$('#deleteEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
// Show the Modal
$('#manageevent').modal({backdrop: 'static'});
return false;
}
/* function sendrequest($thedata)
*
*/
function sendrequest($thedata)
{
var $formdata = "JSON=" + JSON.stringify($thedata);
var $xhttp;
$xhttp = new XMLHttpRequest();
$xhttp.onreadystatechange = function()
{
if($xhttp.readyState == 4 && $xhttp.status == 200)
{
$theresults = JSON.parse($xhttp.responseText);
if($theresults.status == 'failure')
{
var $warnalert = '<div id="warningAlert" class="alert alert-danger"><strong>' +
$theresults.status + '</strong> ' + $theresults.message + '</div>';
document.getElementById('manageeventalert').innerHTML = $warnalert;
if($thedata.mode == 'add')
{
$('#addEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
else if($thedata.mode == 'update')
{
$('#addEventBtn').prop("disabled", false);
$('#updateEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
else if($thedata.mode == 'delete')
{
$('#deleteEventBtn').prop("disabled", false);
$('#cancel').prop("disabled", false);
}
var $followup = document.createElement('DIV');
$followup.setAttribute('class','alert alert-info');
var $followuptext = document.createTextNode('You may retry your request');
$followup.appendChild($followuptext);
document.getElementById('manageeventalert').appendChild($followup);
}
else if($theresults.status == 'success')
{
var $okayalert = '<div id="warningalert" class="alert alert-success"><strong>' +
$theresults.status + '</strong> ' + $theresults.message + '</div>';
document.getElementById('manageeventalert').innerHTML = $okayalert;
$thedata.start = moment($thedata.start, 'MM/DD/YYYY hh:mm a');
$thedata.end = moment($thedata.end, 'MM/DD/YYYY hh:mm a');
if($thedata.mode == 'add')
{
$thedata.id = $theresults.dbkey;
console.log($thedata);
$('#calendar').fullCalendar('renderEvent', $thedata);
}
else if($thedata.mode == 'update')
{
$('#calendar').fullCalendar('removeEvents', $thedata.id);
console.log($thedata);
$('#calendar').fullCalendar('renderEvent', $thedata);
}
else if($thedata.mode == 'delete')
{
$('#calendar').fullCalendar('removeEvents', $thedata.id);
}
setTimeout(closemodal, 1500);
}
}
};
$xhttp.open("POST", "opscalendar_post.php", true);
$xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
$xhttp.send($formdata);
return false;
}
I'm using alloyui 2.0 scheduler http://alloyui.com/versions/2.0.x/ (with Liferay EE 6.2)
this is my scheduler :
YUI().use('aui-scheduler', function(Y) {
var config = {
color: '#2bd434',
content: 'Prova!',
id: 'CUSTOM-ID',
disabled: true,
allDay: true
}
var Events = new Y.SchedulerEvent(config);
var weekView = new Y.SchedulerWeekView();
var scheduler = new Y.Scheduler(
{
boundingBox: '#myScheduler',
date: new Date(),
items: [Events],
render: true,
views: [weekView]
}
)
});
When I click on event, I want open another page with details of that specific event.
I have this listener on my scheduler :
$("#myScheduler").on('click','.scheduler-event',function(e){
console.log(e);
var instance = this;
console.log(e.currentTarget);
});
I how can I set custom attributes on currentTarget?
If is not possible, can I set a custom id for that event?(so I can get the detail of this one)
I solved doing this :
Y.Do.after(function(e) {
$('.popover').hide();
var evt = e.getData('scheduler-event');
var id = evt.get('id');
//Other attr created in events array
var MYATTRIBUTE = evt.get('MYATTRIBUTE');
}, eventRecorder, 'showPopover');