Notification on upcoming event date in FullCalendar

Question

Notification on upcoming event date in FullCalendar

I've been thinking about the possibility of setting up a trigger to display something (like an alert, Qtip message, or any other notification) when today's date coincides with an event on my FullCalendar. Currently, I'm using XML from my Google calendar as the data source and would like to have notifications popping up for people's birthdays.

So far, I've implemented the following code snippet:

var difference = birthdate - today;
var days = Math.round(difference/(1000*60*60*24));

if (days == 0){
    $('#tabs').qtip({
    position: {
               my: 'bottom right',
               at: 'top left',
    },
    content: "It's someone's birthday!!!",
    show: {
       when: false,
       ready: true
    },
    hide: false,
    style: {
        classes: 'ui-tooltip-rounded',
       }
    });
}

The variable birthday stores each individual's birthdate that I define in the script, while today represents the current date. However, I realize that this method is not very dynamic since I need to set it up separately for each person.

Thank you in advance for your help.

javascript fullcalendar qtip

Answer 1

Answer №1

When setting up your calendar object or function, be sure to include an eventAfterRender function. This function will only trigger when there is an event placed on the calendar. You can then retrieve the date, compare it to someone's birthday, and display a popup if it matches. I hope this helps! Here's a simple example:

    $(document).ready(function () {
            $('#calendar').fullCalendar({
                height: 600,
                width: 700,
                header: {
                    right: 'prev,next today',
                    center: 'title',
                    left: 'month,agendaWeek,agendaDay'
                },
                eventAfterRender: function (event, element, view) {
                    birthday = new Date('<somedate>');
                    year = new Date(event.start).getFullYear();
                    month = new Date(event.start).getMonth();
                    day = new Date(event.start).getDate();
                    alert(year + ' ' + month + ' ' + day);
    // Use conditions to check if the year, month, and day match with the birthday
// If they do, you can call another function or execute the code for displaying the popup here

                }
            });
        });

Answer 2

When setting up your calendar object or function, be sure to include an eventAfterRender function. This function will only trigger when there is an event placed on the calendar. You can then retrieve the date, compare it to someone's birthday, and display a popup if it matches. I hope this helps! Here's a simple example:

    $(document).ready(function () {
            $('#calendar').fullCalendar({
                height: 600,
                width: 700,
                header: {
                    right: 'prev,next today',
                    center: 'title',
                    left: 'month,agendaWeek,agendaDay'
                },
                eventAfterRender: function (event, element, view) {
                    birthday = new Date('<somedate>');
                    year = new Date(event.start).getFullYear();
                    month = new Date(event.start).getMonth();
                    day = new Date(event.start).getDate();
                    alert(year + ' ' + month + ' ' + day);
    // Use conditions to check if the year, month, and day match with the birthday
// If they do, you can call another function or execute the code for displaying the popup here

                }
            });
        });

Notification on upcoming event date in FullCalendar

Answer №1

Similar questions

Can a Vue computed property return a promise value?

Troubleshooting: Issue with selecting items in jQuery Datatables

Choosing Tags with Ajax in Select2

NodeJS - Bluebird: implementing a loop with a waiting mechanism for completion

execute a function when an image is clicked using jQuery

Is there a way to apply styles to a checkbox's child element depending on the checkbox's state without relying on ternary operators within Styled Components?

Is it possible to include multiple spyObjs within a beforeEach block?

What is the process of transforming the content of a file into an array using JavaScript?

Encountered an error stating "Cannot access property FindAll() of undefined" while working with a node/express JS app

What is the best way to update specific values in a react multiselect component?

"Troubleshooting: Child Component Not Reflecting Changes in UI Despite Using Angular

Ensure that useEffect is triggered before the render process is finished, or consider using an alternate method to achieve

Leveraging jQuery to detect an AJAX load that does not involve the use of jQuery's AJAX method

Is there a way to retrieve a website and make changes to its HTML and CSS?

Error: An unexpected identifier was encountered while executing my function

What is the method for accessing HTML tag data within a script?

Complete Guide to Node.JS CRUD Delete Functionality

Utilizing AngularJS to Transform String Formats

Trigger a pop up using AJAX when successful

Employing the next function in conjunction with an Express server during development