I am using Fullcalendar to select the holidays, at now is working fine until the selection.
I can select multiple days but when i change the month and i go back Fullcalendar didnt remember the days selected.
I want to be able to select all days and then push the Submit button so i can save all days in one click.
My javascript code is:
var events= [{
id : 0,
title: 'All Day Event',
start: new Date(2016, 3, 5)
}];
var i=1;
$(document).ready(function() {
$('#calendar').fullCalendar({
events: events,
dayClick: function(date, jsEvent, view) {
// change the day's background and save the day selected
$(this).css('background-color', 'green');
var temp={id: i, title: 'Holidays', start: new Date(date)};
i=i+1;
events.push(temp);
$('#calendar').fullCalendar( 'renderEvent', temp );
}
});
});
any suggestion?
Thank you.
You need to add a flag to make the event permanent as below :
$('#calendar').fullCalendar({
events: events,
dayClick: function(date, jsEvent, view) {
var temp={id: i, title: 'Holidays', start: new Date(date)};
i=i+1;
events.push(temp);
$('#calendar').fullCalendar( 'renderEvent', temp, true );
}
});
You can also add "backgroundColor" to your event to identify your selection, as setting the table cell's background colour will be lost when you move back and forth.
var temp={id: i, title: 'Holidays', start: new Date(date), backgroundColor: 'green'};
Related
I am having issues setting the date range to my recurring events using jQuery Full Calendar in sharepoint using REST API. Below I provide the script I am using to achieve my goal. As you can see, I am using the ‘dow’ method because it rendered the best results. The recurring the events displays on the calendar, but it displays infinitely in the future as well as the past. Is there a way to constraint the events within a specific date range? Any help or ideas will greatly be appreciated.
[EDIT]
I'm updating my original post because I was able to figure out how to set the range for the recurring events issue (running infinitely). I researched and found that I had to set the range using the "eventRender". Adding this method solved the events showing infinitely in both the future and the past. Now the issue I'm having are; First. I can't show the correct start time for the different event. They all shows the same start time when the start times of the event occurs at different time. Second. The calendar now only displays recurring events and not show a single event. I can fake it by manipulating the date entered in the SharePoint List, but it don't seem like a good practice, especially when someone is working behind me. I posted an updated script and if you see a fixs for the mentioned issue, you would be greatly appreciated.
Screen capture of the results when I run the calendar, it displays the same dates on all the recurring events, when the dates are suppose to be different dates for each of the different recurring events.
var events = [];
var ele = [];
var listUrl = "../_vti_bin/listdata.svc/";
$(document).ready(function() {
Retreive();
////Close Modal Window
jQuery(document).on("click", ".closeBtn", function(){
jQuery('#myModal').fadeOut();
});
jQuery("[data-fancybox]").fancybox({
thumbs: false,
hash: false,
loop: true,
keyboard: true,
toolbar: false,
animationEffect: false,
smallBtn: "false",
arrows: true,
clickContent: false
});
});
function Retreive() {
var listUrl = "../_vti_bin/ListData.svc/ExecSecCalendarList";
$.ajax({
url: listUrl,
type: "GET",
data: {
$select: "Title,Description,StartTime,EndTime,AllDayEvent,Recurrence,RecurStartDate,RecurEndDate,ThemeColor,EventId,URL"
},
headers: {
accept: "application/json;odata=verbose"
},
success: function(data) {
$.each(data.d.results, function(i, value) {
currObj = this;
var fADE = currObj.AllDayEvent;
if (fADE != null) {
if (fADE == 0) {
thisADE = false
} else thisADE = true;
}
var thisID = currObj.EventId;
var thisTitle = currObj.Title;
var thisRecurrence = currObj.Recurrence;
var thisDesc = currObj.Description;
var thisURL = currObj.URL;
ele.push({
title: currObj.Title,
id: currObj.EventId,
start: value.StartTime,
end: value.EndTime,
description: currObj.Description,
color: value.ThemeColor,
allDay : true,
url:currObj.URL,
start: '13:00:00',//How to set dynamically ????
end: '22:00:00',//How to set dynamically ????
dow: [currObj.Recurrence],///Works - what date of the week to show event
ranges: [{ //repeating events are only displayed if they are within at least one of the following ranges.
start: currObj.RecurStartDate, //next two weeks
end: currObj.RecurEndDate
}]
/**/
});
});
BindCalendar();
}
});
}
function BindCalendar() {
var calendarioDiv = $('#calendar');
var fullCalendar = calendarioDiv.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
events: ele,
eventRender: function(event, element, view){
//console.log(dow);
return (event.ranges.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start) );
}).length)>0;
},
/**/
eventClick: function (calEvent, jsEvent, view) {
jsEvent.preventDefault();
$('#myModal a').remove();
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').css({left: event.pageX});
$('#myModal').css({top: event.pageY});
$('#modalURL span').html('<a data-fancybox data-type="iframe" data-src="'+ calEvent.url +'" href="javascript:;" title="Select to e-mail" >'+ calEvent.url +'</a>');
//Open in new window without fancybox
//$('#modalURL').append($('<p/>').html(''+calEvent.title+''));
$('#myModal').fadeIn();
},
error: function() {
alert('Error');
},
editable: false,
draggable: true,
firstDay: 0,
monthNames: ['JANUARY', 'FEBRUARY','MARCH', 'APRIL', 'MAY','JUNE', 'JULY', 'AUGUST', 'SEPTEMBER','OCTOBER', 'NOVEMBER', 'DECEMBER'
],
dayNames: ['Sunday', 'Monday', 'Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday'
],
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
allDay: true
});
}
In reviewing your code, I see that you have duplicate entries for 'start' and 'end' when creating the event. Another issue is having 'allDay' to 'true' when you want a specific start and end.
Overall, it's difficult to answer the question when we don't know the specific SharePoint list data. Are you wanting to show a range of events where there are some exceptions to the range rules? If so, you'll need to query the EventType of the Calendar items.
The following link is helpful to understand the SharePoint Calendar recurrence schema:
https://fatalfrenchy.wordpress.com/2010/07/16/sharepoint-recurrence-data-schema/
I want to manually input the time in the modal , however everytime the modal pops up the time input field has already a value which is the current time in my computer's clock.
How do I edit the javascript so that it will not generate the time automatically.
I used the plug in here https://github.com/tliokos/jquery-fullcalendar-crud . I just Downloaded it. By the way it is my first time to use this plug in.
This is the javascript code:
$(function(){
var currentDate; // Holds the day clicked when adding a new event
var currentEvent; // Holds the event object when editing an event
$('#color').colorpicker(); // Colopicker
$('#time').timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true,
showMeridian: false
}); // Timepicker
// Fullcalendar
$('#calendar').fullCalendar({
timeFormat: 'H(:mm)',
header: {
left: 'prev, next, today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
// Get all events stored in database
events: 'crud/getEvents.php',
// Handle Day Click
dayClick: function(date, event, view) {
currentDate = date.format();
// Open modal to add event
modal({
// Available buttons when adding
buttons: {
add: {
id: 'add-event', // Buttons id
css: 'btn-success', // Buttons class
label: 'Add' // Buttons label
}
},
title: 'Add Event (' + date.format() + ')' // Modal title
});
},
// Event Mouseover
eventMouseover: function(calEvent, jsEvent, view){
var tooltip = '<div class="event-tooltip">' + calEvent.description + '</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$('.event-tooltip').fadeIn('500');
$('.event-tooltip').fadeTo('10', 1.9);
}).mousemove(function(e) {
$('.event-tooltip').css('top', e.pageY + 10);
$('.event-tooltip').css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.event-tooltip').remove();
},
// Handle Existing Event Click
eventClick: function(calEvent, jsEvent, view) {
// Set currentEvent variable according to the event clicked in the calendar
currentEvent = calEvent;
// Open modal to edit or delete event
modal({
// Available buttons when editing
buttons: {
delete: {
id: 'delete-event',
css: 'btn-danger',
label: 'Delete'
},
update: {
id: 'update-event',
css: 'btn-success',
label: 'Update'
}
},
title: 'Edit Event "' + calEvent.title + '"',
event: calEvent
});
}
});
// Prepares the modal window according to data passed
Suggest looking at the docs for the timepicker.
https://jdewit.github.io/bootstrap-timepicker/
In which case set defaultTime=false
defaultTime
'current' (default) - Set to the current time.
Set to a specific time - '11:45 AM'
false - Do not set a default time
I am using this great javascript FullCalendar plugin.
I have to display a month calendar, and when a day is selected, show the agendaView next to it like so:
In that example image, the user has clicked on July 1st, and I need the agendaView on the right to display for July 1st, but it always loads today's date.
Here is the code. You can see the commented code where I tried to set the visible range when the 'day' calendar (agendaView) is loaded, but that did not work. Currently at the end I'm trying to use the changeView function, but that also didn't work.
$(document).ready(function () {
// page is now ready, initialize the calendar...
var selectedDay = null;
var selected = moment();
$('#calendar').fullCalendar({
// options and callbacks here
aspectRatio: 1.5,
dayClick: function (date, jsEvent, view) {
// alert('Clicked on: ' + date.format());
// alert('Current view: ' + view.name);
// reset previously selected day's background color
if (selectedDay !== null) {
$(selectedDay).css('background-color', 'transparent')
};
// change the newly selected day's background color
$(this).css('background-color', '#A5DC86');
selectedDay = this;
// selected = this.fullCalendar.moment();
selected = this.date;
$('#day').fullCalendar({
// visibleRange: function(currentDate) {
// return {
// start: selected.date,
// end: selected.date.clone().add(1, 'days') // exclusive end
// };
// },
aspectRatio: 1.5,
defaultView: 'agendaDay',
header: {left: '', center: 'title', right: ''},
allDaySlot: false,
slotDuration: '00:60:00',
scrollTime: '00:00:00'
}),
$('#day').fullCalendar('changeView', 'agendaDay', selectedDay.date )
}
});
});
It turns out that changeView expects a formatted date, so:
$('#day').fullCalendar('changeView', 'agendaDay', date.format() )
is the solution.
I´m using the full calendar plugin, so I load my data for the current month, but when I click previous, then next then previous again; my previous events get duplicated.
For example, if I had an event with id=1 in november, and I´m in december and I go to november; then I see my event with id=1 duplicated.
Here is my json:
[{"id":2024,"title":"titulo0","start":"2014-12-23 19:22:17","end":"2014-12-23 19:22:17","description":"descripcion0"}]
Here is how I load my calendar:
function loadEventos() {
var current_url = '';
var new_url = '';
$('#calendar').fullCalendar({
events: '/pushCombos/calendarioAction!getEventosMes.action?mes=' + 1,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventClick: function(calEvent, jsEvent, view) {
calEvent.title = "CLICKED!";
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
editarEvento(calEvent);
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
$('#calendar').fullCalendar('updateEvent', calEvent);
}
});
}
and here is the code of my buttons:
$('.fc-button-group').children().eq(1).click(function(){
var date = $("#calendar").fullCalendar('getDate');
var month_int = moment(date).format("MM");
var year_int = moment(date).format("YYYY");
var events = {
url: '/pushCombos/calendarioAction!getEventosMes.action?mes=1',
data: {
month: month_int,
year: year_int
}
};
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
});
When I edit an event and reload it; it reloads fine, but if I use the next and previous buttons, the events get duplicated.
Why is this happening??
Thanks in advance!
Try changing your events option to this:
events: {
url: '/pushCombos/calendarioAction!getEventosMes.action',
type: 'GET',
data: {
mes: 1
},
cache: false,
error: function (jqXHR, textStatus, errorThrow) { //whatever you want }
}
It seems that this plugin automatically does the post when you press the previous button that why it was duplicating the events.
Another weird thing I found is that the first day of the month and the last day of the month it sends to the server are wrong.
I'm trying to add a script to the page but nothing happens, the calendar does not appear.
The objective is to render a calendar with a list of events, im trying to avoid webservices to get the list.
string CalendarScript = #"<script type=""text/javascript"">
jQuery(function ($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// 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
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
lang: ""pt"",
allDaySlot: false,
minTime: ""07:00:00"",
maxTime: ""23:59:59"",
defaultView: 'agendaWeek',
header: {
left: ' ',
center: ' ',
right: ' '
},
events: [ " + EventsList + #"
]
,
columnFormat: {
week: 'dddd',
},
editable: false,
droppable: false, // this allows things to be dropped onto the calendar !!!
selectable: false,
selectHelper: false
});
})
</script>";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "InitCalendarEvents", CalendarScript, false);
where the EventList is like this
{ title: 'Some Event', start: new Date(y, m, d - 2, 16, 00), end: new Date(y, m, d - 2, 17, 00), allDay: false, color: 'blue !important', textColor: 'white !important' }
Two things. First, when you use register a script with the script manager, it should be just the javascript and not wrapped in a script tag. Second, you will most likely want the function to occur on the the add_load event.
This is a sample snippet:
this.Page.ClientScript.RegisterStartupScript(
this.GetType(),
"StartupScript",
"Sys.Application.add_load(function() { functioncall(); });",
true);
Note that the parameter for the javascript function is a javascript function and not an html script element. Also, not that the function is composed into Sys.Application.add_load
If you do those two things, the script should at least be executed. The question Sys.application.add_load vs document ready vs pageload is probably relevant to what you are trying to do.