The page containing FullCalendar version 5.4 in my application displays (non-working) links for days and days of the week:
https://courses.ics.hawaii.edu/ics314f21/schedule/
These links are created despite the fact that (by viewing the page source) you can see that I explicitly set navLinks: false:
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
navLinks: false,
initialView: 'dayGridMonth',
eventColor: '#446e9b',
eventSources: [{events: moreaEventData}, holidayData]
});
calendar.render();
});
</script>
How do I disable navLinks?
Thanks for the suggestion to think about the theme! I added the following CSS and now the calendar page looks better:
a.fc-daygrid-day-number {
text-decoration: none;
}
a.fc-col-header-cell-cushion {
text-decoration: none;
}
Related
I'm doing some tests with the FullCalendar tool and I have an idea but can't find how to do it.
I'm playing with this demo from the ListView doc page : https://codepen.io/pen?editors=0010
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listDay',
headerToolbar: {
left: 'title',
center: '',
right: ''
},
events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});
calendar.render();
});
Is it possible to load the "listDay" on a specific day instead of the actual day ?
So the solution is to add an initialDate:'' in the parameters
Thank you #ADyson
I've been working with the FullCalendar configuration for a little bit now but I've reached a point that I just can't get figured out. I want to enable to tooltips to appear when the end user hovers over the event. I would like to give a little further information in the tooltip for the event, such as a phone contact number, etc.
I've tried a number of different options that I was able to find.
The list of links below for example.
FullCalendar event popup
http://jsfiddle.net/m54g5aen/
Fullcalendar / eventdidmount - issue with "more link"
I'll pulling in my events via a JSON array from a PHP script.
Here is my Calendar rendering code.
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 550,
slotDuration: {minutes: 15},
nowIndicator: true,
allDaySlot: false,
eventBackgroundColor: '#916FDF',
slotMinTime: "08:00:00",
slotMaxTime: "20:00:00",
displayEventEnd: false,
initialView: 'timeGridWeek',
events: <?php print json_encode($events); ?>,
eventDidMount: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
customButtons: {
addNewAppointment: {
text: 'New Appt',
click: function() {
window.location.href="../client/newAppointment.php";
}
}
},
headerToolbar: {
left: 'title',
center: 'dayGridMonth timeGridWeek',
right: 'prev next today addNewAppointment'
}
});
calendar.render();
});
</script>
My PHP to pull the events is as follows:
<?php
require_once('../db_connect.php');
// Check to see if the session is already started.
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
$query = 'SELECT
CONCAT(client.cl_fName, " ", client.cl_lName) AS "title",
CONCAT(appointment.sched_date,"T", appointment.start_time) AS "start",
CONCAT(appointment.sched_date,"T", appointment.end_time) AS "end",
CONCAT("TEST", " DESCRIPTION") AS "description"
FROM
appointment, client
WHERE appointment.client_id = client.client_id';
$statement = $db1->prepare($query);
$statement->execute();
$events = $statement->fetchAll();
$statement->closeCursor();
?>
I appreciate all suggestions. Thank you in advance.
Try using a popover instead of a tooltip, it's better than a tooltip if you wanna add more info to it.
change youreventDidMount to
eventDidMount: function (info) {
$(info.el).popover({
title: info.event.title,
placement: 'top',
trigger: 'hover',
content: 'more info on the popover if you want',
container: 'body'
});
}
How do I attach a handler to the navigation buttons in FullCalendar v4? There is nothing specified in the official documentation.
One way to get what you need is to hide the default prev and next buttons and replace with your own custom buttons, for which there are click callbacks.
Please see https://codepen.io/ormasoftchile/pen/NVJeez for a working example.
customButtons: {
customprev: {
text: '<',
click: function() {
alert('clicked custom button 1!');
calendar.prev();
}
},
customnext: {
text: '>',
click: function() {
alert('clicked custom button 2!');
calendar.next();
}
}
}
Regards, Cristian
The only build-in method is the events: fn () callback. From the docs
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
events: function (info) {
console.log(info);
}
});
calendar.render();
});
I am using FullCalendar version 3.9.0. We had previously been using a much older version.
For the events in the calendar, when you click them, it opens a pop-up window. This window is drawing behind the grid lines and numbers and it gets cut off if it goes beyond the bounds of the grid (for example opening an even right near the left edge would cause any of the popup that extends further left than the calendar to be cut off).
My calendar is defined like so:
$('#calendar').fullCalendar({
locale: initialLocaleCode,
height: "auto",
contentHeight: "auto",
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
loading: function(isLoading) {
if (isLoading) {
isCalClick = true;
} else {
isCalClick = false;
}
},
events: function (start, end, timezone, callback) {
$.ajax({
url: homeUrl + 'Run',
type: "GET",
dataType: "JSON",
success: function (result) {
var events = [];
$.each(result.Events, function (i, data) {
events.push(
{
moduleId: data.moduleId,
title: data.title,
id: data.id,
timeStamp: data.timeStamp,
state: data.state,
user: data.user,
result: data.result,
start: moment(data.start).format('YYYY-MM-DD'),
end: moment(data.timeStamp).format('YYYY-MM-DD')
});
});
callback(events);
},
error: function () {
alert('there was an error while fetching events!');
}
});
},
eventRender: function (event, element) {
createEvent(event, $(element));
}
});
Then there is a create popover event that creates popups (popovers) for each event...
function createPopover(event, el) {
var title = event.title;
var html = SomeMethodToGetHtmlContentsOfPopup();
el.popover({
'placement': "left",
'html': true,
'title': title,
'content': html,
});
}
The popup (popover) window itself can be styled with the .popover CSS...
#calendar .popover,
.large-chart .popover {
color: #333;
width: 340px;
z-index: 999 !important;
position: relative !important;
}
I've tried all sorts of combinations of styling this .popover control. The styles do apply as I see them when debugging it. I would expect putting z-index higher than any other items and using position:relative should bring this to the front but it does not.
Any ideas? The examples I've seen running online don't seem to have this issue, just what I'm doing.
How do I implement this code from qTip for my fullcalendar Events? This is a modal feature of the qTip plugin and I wish to display this modal whenever I click an event in the calendar.
Here is the link for the tutorial:
http://craigsworks.com/projects/qtip/demos/effects/modal#
Here's an example on how to create the qtip when an event gets clicked. For perfomance reasons, the modal is created onclick for the specified event, not onpageload for all events.
$(document).ready(function() {
// watch for click on the event elements
$(document).on('click', '.fc-event', function(){
// qtip already is created for this event -> leave this function -> the modal gets opened
if($(this).data('qtip')) {
return;
}
// no qtip for this event created -> create it
$(this).qtip(
{
content: {
title: {
text: 'Modal qTip',
button: 'Close'
},
text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! <br /><br />' +
'Much like the Boxy plugin, ' +
'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
},
position: {
target: $(document.body), // Position it via the document body...
corner: 'center' // ...at the center of the viewport
},
show: {
when: 'click', // Show it on click
solo: true // And hide all other tooltips
},
hide: false,
style: {
width: { max: 350 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#666666'
},
name: 'light'
},
api: {
beforeShow: function()
{
// Fade in the modal "blanket" using the defined show speed
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
// Fade out the modal "blanket" using the defined hide speed
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
}
}
});
// show it after creation
$(this).qtip('toggle', true);
});
});