Call FullCalendar by passing date from another website page - Odoo V10 - fullcalendar

I have showed the full calendar into Odoo website home page by using the below source code,
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data noupdate="1">
<!-- Banner -->
<template inherit_id="website.homepage" id="homepage_inherit">
<xpath expr="//div[#id='wrap']" position="replace">
<link rel='stylesheet' href='/fullcalendar/fullcalendar.css' />
<script type="text/javascript" src='/fullcalendar/lib/jquery.min.js'></script>
<script type="text/javascript" src='/fullcalendar/lib/moment.min.js'></script>
<script type="text/javascript" src='/fullcalendar/fullcalendar.js'></script>
<script type="text/javascript">
/*
jQuery document ready
*/
$(document).ready(function()
{
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/*
Initialize fullCalendar and store into variable.
Why in variable?
Because doing so we can use it inside other function.
In order to modify its option later.
*/
var calendar = $('#calendar').fullCalendar(
{
/*
header option will define our calendar header.
left define what will be at left position in calendar
center define what will be at center position in calendar
right define what will be at right position in calendar
*/
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
/*
defaultView option used to define which view to show by default,
for example we have used agendaWeek.
*/
defaultView: 'agendaWeek',
/*
selectable:true will enable user to select datetime slot
selectHelper will add helpers for selectable.
*/
selectable: true,
selectHelper: true,
/*
when user select timeslot this option code will execute.
It has three arguments. Start,end and allDay.
Start means starting time of event.
End means ending time of event.
allDay means if events is for entire day or not.
*/
select: function(start, end, allDay)
{
/*
after selection user will be promted for enter title for event.
*/
var title = prompt('Event Title:');
/*
if title is enterd calendar will add title and event into fullCalendar.
*/
if (title)
{
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
/*
editable: true allow user to edit events.
*/
editable: true,
/*
events is the main option for calendar.
for demo we have added predefined events in json object.
*/
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<div id='calendar'></div>
</xpath>
</template>
</data>
</odoo>
Now i need to navigate from contactus page to home page with some date , calendar should load dayview with the date given,
<template inherit_id="website.contactus" id="contactus_inherit">
<xpath expr="//div[#id='wrap']" position="replace">
<div class="text-center mt64" name="mail_button">
<a t-attf-href="#" onclick="alert('test');
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var n = new Date(y, m, d-3);
window.href = '/homepage';
$('#calendar').fullCalendar( 'gotoDate', n)" class="btn btn-primary" id="o_contact_mail">Send us an email</a>
</div>
</xpath>
</template>
Calling like above throws "$..fullcalendar is not a function" error.
how can i do this ? Please anyone provide me an idea to proceed this further !!!

Related

Jquery full calendar (style changes after page refresh)

This is my calendar initially after the event creation:
and this is after page refresh:
Can anyone help me understand how to keep the same style even after page refresh, specifically the vertical line in the middle? Sometimes the line increases as well.
The fullCalendar JS is as follows:
$('#calendar').fullCalendar({
locale: 'nl',
weekends: true, // false will hide Saturdays and Sundays
defaultView: 'agendaWeek',
allDaySlot: false,
slotLabelFormat: "HH:mm",
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
aspectRatio: 1,
editable: true,
eventStartEditable: true,
selectable: true,
selectHelper: true,
unselectAuto: false,
eventLimit: true,
dragScroll: true,
eventOverlap: false,
slotEventOverlap: false,
header: {
left: 'title',
center: '',
right: 'prev,next,today,agendaWeek,agendaDay'
},
views: {},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
var title = "Available";
var eventInfo;
eventInfo = {
title: title,
start: event.start,
end: event.end,
id: event.id
};
updateEvent(eventInfo);
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
var title = "Available";
var eventInfo;
eventInfo = {
title: title,
start: event.start,
end: event.end,
id: event.id
};
updateEvent(eventInfo);
},
select: function (start, end) {
var title = "Available";
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
createEvent(eventData);
}
$('#calendar').fullCalendar('unselect');
},
eventSources: [{
events: function (start, end, timezone, callback) {
var employeeId = $("#employee-Id").val();
$.ajax({
url: '../' + employeeId + '/events',
dataType: 'json',
success: function (response) {
var events = $.parseJSON(response.data);
$('#calendar').fullCalendar('addEventSource', events);
callback(events);
}
});
}
}],
eventRender: function (event, element) {
//delete event on double click..Tanvir
element.one().bind('dblclick', function (e) {
/* e.preventDefault();
$(this).prop('disabled', true);
setTimeout(function () { $(this).prop('disabled', false); }, 500);*/
$("#startTime").html(moment(event.start).format('MMM Do YYYY, h:mm A'));
$("#endTime").html(moment(event.end).format('MMM Do YYYY,h:mm A'));
$("#eventContent").dialog({modal: true, title: event.title, width: 100});
$('.delete-event').bind('click', function (e) {
$('#calendar').fullCalendar('removeEvents', event._id);
deleteEvent(event.id);
$("#eventContent").hide();
});
$('.discard-delete').bind('click', function () {
$("#eventContent").hide();
});
});
},
});
});
No duplicate event is created in the database. What is happening a the event HTML is rendering twice after refresh. Specifically fc-time-grid-event under the event container class is rendering twice after refresh.
The cause of the duplication is here, in your events function:
$('#calendar').fullCalendar('addEventSource', events);
callback(events);
You are adding the event objects as an event source, AND sending them back to the calendar as a list of events, in the documented way. So while the events may not be duplicated in your database, your code is sending two sets of identical event data to the calendar, and consequently they are displayed twice.
You can simply remove this line:
$('#calendar').fullCalendar('addEventSource', events);
as it is totally unnecessary in this context.

fullcalendar eventDragStop triggered after event returns to original position

I would like to delete events on a fullcalendar jquery plugin by dragging them to a trash can image and dropping them in. There are several posts that discuss this action but I can't seem to get mine to work.
The trash can image is defined in the cshtml below:
<div class="well well-sm" id="deleteEventsDiv" style="text-align:center">
<label id="delete_events_lbl" style="display:block; text-align:center; font-size:medium; font-weight:bold">Delete Events</label>
<img src="~/Images/cal-trash.png">
<div class="note">
<strong>Note:</strong> Drag and drop events here to delete them
</div>
</div>
I can drag the event to the trash can but it reverts back to its original position then the eventDragStop event is triggered. Since it is not over the trash can, the rest of the code is not run. This is my fullcalendar code:
$('#edit_calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
selectable: true,
selectHelper: true,
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {
var memberName = $(this).data('event').title;
var memberID = $(this).attr('id').toString();
//Create Event - add to array
var newEvent = new Object();
newEvent = {
title: memberName,
id: memberID,
start: date.format(),
end: date.format(),
objectID: 0
};
eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required. So, you can't add events over a year away from the current date
eventConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
start: moment().startOf('day'),
end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
resizable: true,
dragRevertDuration: 0,
eventDragStop: function (event, jsEvent, ui, view) {
alert('event drag stopped...should be over trash can.');
// This condition makes it easier to test if the event is over the trash can using Jquery
if ($('div#deleteEventsDiv').is(':hover')) {
// Confirmation popup
$.SmartMessageBox({
title: "Delete Event?",
content: 'Are you sure you want to remove this event from the calender?',
buttons: '[No][Yes]'
}, function (ButtonPressed) {
if (ButtonPressed === "Yes") {
// You can change the URL and other details to your liking.
// On success a small box notification will fire
$.ajax({
url: '/events/' + event.id,
type: 'DELETE',
success: function (request) {
$.smallBox({
title: "Deleting Event",
content: "Event Deleted",
color: "#659265",
iconSmall: "fa fa-check fa-2x fadeInRight animated",
timeout: 4000
});
$('#edit_calendar').fullCalendar('removeEvents', event.id);
}
});
}
});
}
}
}); //end calendar initialization
How do I get the event from NOT returning to its original position when it is over the trash can?
i had same problem here. And i found a paleative solution.
I hope that it works for you too.
Open fullcalendar.js and edit:
dragRevertDuration: 500
to
dragRevertDuration: 0

Adding/Removing eventSources FullCalendar

I'd like to be able to filter events based on adding and removing eventSources. I can't find a good example of this being done.
.fullCalendar( 'addEventSource', source )
.fullCalendar( 'removeEventSource', source )
I'd like to have check boxes that toggle the execution of those functions. I can't seem to get the functionality working though.
$( "#target" ).click(function() {
$('#calendar').fullCalendar( 'removeEventSource', 'Event1' );
});
Here is my full code:
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'prev,next',
right: 'month,agendaWeek,agendaDay,today'
},
eventLimit: {
'agenda': 4, // adjust to 6 only for agendaWeek/agendaDay
'default': true // give the default value to other views
},
eventSources: [
{
title: 'Event1',
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"
},
{
url: 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic'
},
{
url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic"
}
],
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
Here is the full code I used to get this functionality:
HTML:
<form id="#calendar_list">
<input class="checkbox" type="checkbox" checked>Event Group 1<br>
<input class="checkbox1" type="checkbox" checked>Event Group 2<br>
<input class="checkbox2" type="checkbox" checked>Event Group 3<br>
</form>
Javascript:
$(".checkbox").change(function() {
if(this.checked) {
$('#calendar').fullCalendar( 'addEventSource', 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
}
else{
$('#calendar').fullCalendar( 'removeEventSource', 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
}
});
Load FullCalendar : Use following given code to load FullCalendar. create a jquery function like LoadCalendar and put below code in this function and call this function on document.ready function in jquery.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
locale: '#companyCulture',
defaultDate: Date.now(),
defaultView: 'month',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
dayClick: function (date, allDay, jsEvent, view) {
//$("#lblDate").html('' + moment(date).format("MMMM DD,YYYY hh:mm") + '');
$("#lblDate").html('' + moment(date).format("MMMM DD,YYYY hh:mm A") + '');
$("#hdRDate").val(moment(date).format());
emptyEventDetails(date);
// $("#AddEventModel").modal();
},
eventClick: function (calEvent, jsEvent, view) {
$.ajax({
type: "GET",
async: false,
cache: false,
url: "#Url.Action("GetEventById", "Events")",
data: {
Eventid: calEvent.id
},
success: function (data) {
emptyEventDetails();
//$.each(data.data, function () {
// alert(this["Title"]);
// var color = 'orange';
// var Title = this["Title"];
// //addCalanderEvent(this["EventID"], this["EventDate"], Title, color);
//});
}
});
//$("#lblDate").html('' + calEvent.EventDate + '');
//$("#hdRDate").val(calEvent.EventDate);
//$("#AddEventModel").modal();
}
});
Add a Event: Use the below code to add a event in FullCalendar
var eventObject = {
title: title,
start: moment(start).format("MMMM DD,YYYY hh:mm A"),
end: moment(end).format("MMMM DD,YYYY hh:mm A"),
id: id,
color: colour
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
OR
$('#calendar').fullCalendar( 'addEventSource', newSource); //Add a new source
Remove all Events: I'm trying to remove all the event sources in the fullcalendar plugin. I'm currently using a combination of
$('#calendar').fullCalendar('removeEvents') //Hide all events
$('#calendar').fullCalendar('removeEventSource', $('.Source').val()) //remove eventSource from stored hidden input
OR
$('#Calendar').fullCalendar( 'removeEvents').fullCalendar('removeEventSources'); //Removes all event sources

Fetching all GoogleCalendar Events before FullCalendar has loaded

I currently am using Adam Shaw's jQuery Calendar 'FullCalendar' and am experiencing significant delays in the calendar rendering. In short, the page appears, 1 second passes, the Calendar pops in, another second passes, and then the events populate the page, here. Is there a way to only fetch a certain number of events behind and before today's date? Or even loading the calendar immediately would be an improvement. I am also using Craig Thompson's qTip2.
Javascript
<script type=text/javascript>
// Setup FullCalendar
jQuery(document).ready
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
},
},
events: {
render: function(event, api) {
var elem = api.elements.bgiframe;
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'event',
viewport: $(window),
adjust: {
mouse: false,
scroll: true,
method: 'shift',
resize: true
}
},
show: {
modal: {
on: false,
blur: true,
stealfocus: false
}
},
hide: false,
style: 'qtip-bootstrap'
}).qtip('api');
$('#fullcalendar').fullCalendar({
eventSources: ["https://www.google.com/calendar/feeds/emailaddresshere/public/basic",
"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"],
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
selectable: true,
eventClick: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: true,
eventDragStart: false,
viewDisplay: function() { tooltip.hide() }
});
}());
</script>

Display only allDay events in a month view full calendar

How to display only allDay = true events in full calendar month view , and remaining non all Day events as usal in other views
You can do this by checking for view.name in a callback like eventRender. Take a look at this fiddle: http://jsfiddle.net/100thGear/vyKSZ/
Hope this helps!
$('#external-events div.external-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)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1111999,
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();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
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();
}
},
eventDrop: function(event, delta, revertFunc) {
alert( event.id );
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/task/periodic-task-update",
data : {
id : event.id ,
date :event.start.format()
},
success: function(data) {
if(data=='Task Period Succesfully Changed'){
toastr.success("Task Period Succesfully Changed.");
}else{
toastr.success("Something Wrong");
revertFunc();
}
},
error: function(data,textStatus,xhr) {
toastr.success("Something Wrong");
revertFunc();
}
});
},
events: [
<c:forEach var='periodicTask' items='${periodicTaskTemplates}'>
<c:forEach varStatus="i" begin = "1" end = "12">
{ id: '${periodicTask.id}', title: '${periodicTask.task}', start: new Date(y, '${i.index}', '${periodicTask.startDate}'), end: new Date(y, '${i.index}', '${periodicTask.lastDate}') ,type:'${periodicTask.description}',location:'${periodicTask.location.name}'},
</c:forEach>
</c:forEach>`
],
});

Resources