I have been able to successfully implement fullcalendar with the BC news module but when the event has passed, it disappears from the calendar completely. I need all events, past and present to stay on the calendar but when I replace the event module with the news module or a webapp, my page just goes blank. Anyone have experience with this? The code below is for the working event module, if I change:
{module_booking filter="all" collection="theEvents" template=""}
to:
{module_announcement filter="all" collection="theEvents" template=""}
I get the blank page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="/css/fullcalendar.min.css" rel="stylesheet" />
<link href="/css/fullcalendar.print.min.css" rel="stylesheet" media="print" />
<link href="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet" />
<script src="/js/moment.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/fullcalendar.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'calendar',
prerender: true,
content: {
text: ' ',
title: {
button: true
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'mouse',
viewport: $('#calendar'),
adjust: {
mouse: false,
scroll: false
}
},
show: false,
hide: false,
style: 'qtip-light'
}).qtip('api');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,month'
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'list day' },
listWeek: { buttonText: 'list week' }
},
defaultView: 'month',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
eventMouseover: 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: function() { tooltip.hide() },
eventDragStart: function() { tooltip.hide() },
viewDisplay: function() { tooltip.hide() },
events: [
{module_booking filter="all" collection="theEvents" template=""}
{% for item in theEvents.items -%}
{
title: '{{ item.name }}',
url: '{{ item.url }}',
start: '{{ item.date | date: "yyyy-MM-dd" }}'
},
{% endfor -%}
]
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
In the case of bookings, you're probably better to use a liquid layout with {module_data} since the regular tags won't render past events.
{module_data resource="bookings" version="v3" fields="name,body,date,capacity,hideWhenFull,disabled,deleted,requiresPayment,createDate,lastUpdateDate" skip="0" limit="10" order="id" collection="myData"}
See the {module_data} documentation
and you may also want to install the BC api discover app from here
Related
How can I save the data? In json or in any other format.
Its demo fullcalendar
Docs Date Clicking & Selecting
My main page:
Html code where i load data from list:
.
<html><head>
<meta charset="utf-8">
<link href="../lib/main.css" rel="stylesheet">
<script src="../lib/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function(arg) {
if (confirm('Are you sure you want to delete this event?')) {
arg.event.remove()
}
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
}
]
});
calendar.render();});
</script>
</head>
<body class="">
<div id="calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard"><div class="fc-header-toolbar fc-toolbar fc-toolbar-ltr"><div class="fc-toolbar-chunk"><div class="fc-button-group">
</body></html>
You need to query data using calendar.getEvents() and then save the file using e.g. How do I save JSON to local text file
Try to put more effort into reading the docs, FullCalendar has a very nice documentation.
This is my code, which works if I use it oiuside of my Sitecore project perfectly. However when I use it in my Sitecore View, it throws the following error:
Uncaught TypeError: $(...).fullCalendar is not a function
at HTMLDocument.
<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css'>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'basicWeek,month',
center: 'title',
right: 'today,prev,next '
},
defaultDate: '2016-12-12',
});
});
</script>
<h2>Events and Appointments</h2>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</div>
I have checked and it doesn't look like I have any conflicting jquery references and there are no other console errors.
I think you have problem with js try the below urls it may solve your problems,
$('#calendar').fullCalendar({
header: {
left: 'basicWeek,month',
center: 'title',
right: 'today,prev,next '
},
defaultDate: '2016-12-12'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/gcal.js"></script>
<link href="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.print.css" rel="stylesheet"/>
<div id = "calendar"></div>
I think you found same problem with me
(may be js and css broke)
and I change to use dom javascript
<script>
document.addEventListener('DOMContentLoaded', function()
{
var calendarEl = document.getElementById('calendar');
var yearMonth = document.getElementById('yearMonth');
//alert(yearMonth.value);
var calendar = new FullCalendar.Calendar(calendarEl,
{
height: 600,
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
customButtons: {
prev: {
text: 'prev',
click: function() {
}
},
next: {
text: 'next',
click: function() {
}
}
,
today: {
text: 'today',
click: function() {
}
}
},
eventBackgroundColor: '#D2FFF9',
defaultDate: '',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
},
loading: function(bool)
{
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
},
eventClick: function(arg) {
},
eventRender: function(info) {
//info.el.querySelector('.fc-title').innerHTML = info.event.title ;
}
});
calendar.render();
});
</script>
I have been trying to get this piece of JavaScript to work correctly but to no avail. Currently the code should block the current page from following the link and open in another tab/page. What is currently happening is a new page is opening and link followed but when I go back to the original page it loads the link when it should stay on the page. Why is this behaviour happening? See my code below.
<link href='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.css' rel='stylesheet' />
<script src='/assets/js/demo-to-codepen.js'></script>
<script src='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
eventColor: '#03a9f3',
eventTextColor: 'white',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: false,
events: [
{
title: 'TEST URL',
url: 'http://google.com/',
start: '2019-12-12T16:00:00'
},
],
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if (info.event.url) {
window.open(info.event.url);
}
}
});
calendar.render();
});
I just tested it on codesandbox and it works fine or i may not understand what the problem is.
I am trying to delete events on button click using:
eventRender: function(event, element) {
element.append( "<span class='closeon'>X</span>" );
element.find(".closeon").click(function() {
$('#calendar').fullCalendar('removeEvents',event._id);
});
},
but it deletes all events in the calendar instead of clicked event. I've tried other solutions provided but they are either with list item view or dayagenda view (timeGrid in v4) while I am using month view (dayGrid) only. My js of fullcalendar is as follows:
<script src="{{ URL::asset('fullcalendar/packages/core/main.js') }}"></script>
<script src="{{ URL::asset('fullcalendar/packages/interaction/main.js') }}"></script>
<script src="{{ URL::asset('fullcalendar/packages/daygrid/main.js') }}"></script>
<script src="{{ URL::asset('moment/moment.js') }}"></script>
<script src="{{ URL::asset('js/jQuery.min.js') }}"></script>
<script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: false,
center: 'title',
},
defaultView: 'dayGridMonth',
validRange: {
start: '2019-08-26',
end: '2019-09-26',
},
selectable: true,
editable : true,
droppable : true,
eventSources: [
{
url: '{{"roster/getEvents"}}',
allDay: false,
allDayMaintainDuration: false,
textColor: 'black',
},
{
url: '{{"roster/getGazette"}}',
editable: false,
overlap: false,
},
],
});
calendar.render();
});
</script>
Note: I've also tried using dialog like this:
eventClick: function(calEvent, jsEvent, view) {
id= calEvent.id;
$( "#dialog" ).dialog({
resizable: false,
height:100,
width:500,
modal: true,
title: 'Want you want to do?',
buttons: {
CLOSE: function() {
$("#dialog").dialog( "close" );
},
"DELETE": function() {
//do the ajax request?
}
}
});
},
but it gives "typeerror $(...).dialog is not a function" upon click.
Solution: first i corrected my code, i was using fullCalendar v4 libraries and i was using v3 functions which created conflict. Then i used bootsrap modal in html and called it in JS. At last i used Ajax call to delete events Code is as follows:
$(document).ready(function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'bootstrap'],
themeSystem: 'bootstrap',
header: {
left: false,
center: 'title',
},
defaultView: 'dayGridMonth',
validRange: {
start: '2019-08-26',
end: '2019-09-26',
},
selectable: true,
editable : true,
droppable : true,
eventClick: function(info) {
id = info.event.id;
$("#myModal").modal();
window.deleteRecord=function() {
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="edit-token"]').attr('content')
},
type: "POST",
url: "{{route('deleteRecord')}}",
data: JSON.stringify(id),
contentType: "application/json; charset=utf-8",
dataType: "json",
}).done( function(data){
console.log('Ajax was Successful!');
console.log(data);
location.reload(true);
}).fail(function(data){
console.log('Ajax Failed');
});
}
},
eventSources: [
{
url: '{{"roster/getEvents"}}',
allDay: false,
allDayMaintainDuration: false,
textColor: 'black',
},
{
url: '{{"roster/getGazette"}}',
editable: false,
overlap: false,
},
],
});
calendar.render();
});
My popover isn't working when I trigger an evenLimitClick event in my fullcalendar. It works fine in my dayClick event, but nothing happens in my eventLimitClick. Here is my fiddle
I even tried setting the popover to be called on the parent (ex. $(this).parent().popover, but that didn't work either.
$(document).ready(function () {
// page is now ready, initialize the calendar...
var eventsArray = [{
title: 'Test1',
start: new Date()
}, {
title: 'Test2',
start: new Date("2015-04-21")
}, {
title: 'Test3',
start: new Date("2015-04-21")
}];
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
events: eventsArray,
eventLimit: 1,
eventLimitClick: function (cellInfo, jsEvent) {
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function () {
return $("#events-popover-head").html();
},
content: function () {
return $("#events-popover-content").html();
}
});
$(this).popover('show');
},
dayClick: function (cellInfo, jsEvent) {
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function () {
return $("#events-popover-head").html();
},
content: function () {
return $("#events-popover-content").html();
}
});
$(this).popover('show');
},
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
<div id="events-popover-head" class="hide">Events</div>
<div id="events-popover-content" class="hide">Test</div>
</div>
In the eventLimitClick event change following:
$(this).popover
To
$(cellInfo.dayEl)
cellInfo.dayEl is the clicked Day cell element for which you want to show popover.
I have updated the Fiddle also