How to Implement a Bootstrap DateTimePicker Calendar with Event Markers

Have you ever seen Bootstrap’s DateTimePicker calendar and wanted to implement it in your system, but found there’s no unified and clear documentation on how to do it? Let me help you with a step-by-step guide to set it up, capture click events, and mark events on the calendar.

1. Introduction

Bootstrap DateTimePicker is a powerful plugin that enhances the usability of calendars with inline displays and interactive date selections. This tutorial will show you how to initialize the DateTimePicker, capture various click events, and mark specific dates with custom event indicators.

2. Use Cases

Display Inline Calendar:
Show a responsive calendar directly on your web page, allowing users to view dates easily without popup dialogs.
Event Markers:
Highlight specific dates with custom indicators or markers to visually denote events, appointments, or important days.
Navigation Control:
Enable users to navigate seamlessly between months and years using intuitive controls, ensuring a smooth user experience.
Date Selection:
Facilitate date selection with clickable day cells, supporting both single and range selections based on user needs.
Event Integration:
Integrate event data dynamically into the calendar, dynamically updating markers based on real-time data or user inputs.
Responsive Design:
Ensure the calendar adapts to different screen sizes and devices, maintaining usability and functionality across platforms.
Customizable Styling:
Customize the appearance of the calendar and event markers to match your application’s branding or design guidelines.
Interactive Features:
Implement interactive features such as tooltips on hover or click events on event markers to provide additional information.
Integration with Backend:
Connect the calendar to backend systems to store and retrieve event data, ensuring synchronization with other parts of the application.
Accessibility Considerations:
Design the calendar with accessibility features in mind, making it usable for all users, including those using assistive technologies.

3. Where to Get It

You can get the Bootstrap DateTimePicker plugin from the following sources:

Bootstrap DateTimePicker on GitHub

Make sure to include the necessary CSS and JS files in your project. You will also need jQuery and Moment.js for the DateTimePicker to work properly.

4. How to Initialize

To initialize the DateTimePicker, include the required libraries and initialize the plugin on your target element.

Bootstrap DateTimePicker Calendar with Events

5. How to Capture Click Events

To capture click events on the days, months, years, prev, and next buttons, you can use jQuery’s on method. This allows you to add event listeners dynamically to elements that are created after the page load.

$(document).on('click', '.datepicker .next, .datepicker .prev, .datepicker .datepicker-switch, .datepicker-months .month', function() {
    setTimeout(markEvents, 100); // Delay to ensure the calendar is updated before marking events
});

6. How to Implement Markers

The markEvents function iterates through the event data and adds markers to the corresponding date cells in the calendar. Ensure that the date format is converted correctly before comparison.

function markEvents() {
    eventData.forEach(function(event) {
        var eventDate = event.date;
        var title = event.title;

        // Find the corresponding date cell in the calendar
        $('#calendar td.day').each(function() {
            var cell = $(this);
            var cellDate = cell.attr('data-day'); // Assuming the date is stored in a data attribute

            // Convert the cellDate format from 'm/d/Y' to 'Y-m-d'
            var cellDateFormatted = moment(cellDate, 'MM/DD/YYYY').format('YYYY-MM-DD');

            if (cellDateFormatted === eventDate) {
                // Add marker or indicator
                cell.addClass('has-event').attr('title', title);
                cell.append('<div class="event-indicator"></div>');
            }
        });
    });

    // Prevent the event indicator from being removed on click
    $('.event-indicator').on('click', function(event) {
        event.stopPropagation();
    });
}

7. Provide Full Code in One HTML File

Here is the complete HTML file that integrates all the steps mentioned above.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap DateTimePicker Calendar with Events</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css">
    <style>
        /* CSS for event indicator */
        .event-indicator {
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background-color: #007bff; /* Example color */
            border-radius: 50%;
            pointer-events: none; /* Ensure indicator is not interactive */
        }

        /* Optional: Style for cells with events */
        .has-event {
            position: relative; /* Ensure position for absolute child */
            cursor: pointer; /* Optional: Change cursor on hover */
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div id="calendar"></div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
    <script>
        var eventData = [
            { date: '2024-06-27', title: 'Event 1' },
            { date: '2024-06-28', title: 'Event 2' },
            // Add more events as needed
        ];

        $(function() {
            $('#calendar').datetimepicker({
                format: 'L', // Locale date format (e.g., 'MM/DD/YYYY')
                inline: true
            });

            // Once the calendar is rendered, manually mark the events
            setTimeout(markEvents, 100); // Adding a slight delay to ensure the calendar is fully rendered

            // Add event listeners for next, prev, and month/year buttons
            $(document).on('click', '.datepicker .next, .datepicker .prev, .datepicker .datepicker-switch, .datepicker-months .month', function() {
                setTimeout(markEvents, 100); // Delay to ensure the calendar is updated before marking events
            });
        });

        function markEvents() {
            eventData.forEach(function(event) {
                var eventDate = event.date;
                var title = event.title;

                // Find the corresponding date cell in the calendar
                $('#calendar td.day').each(function() {
                    var cell = $(this);
                    var cellDate = cell.attr('data-day'); // Assuming the date is stored in a data attribute

                    // Convert the cellDate format from 'm/d/Y' to 'Y-m-d'
                    var cellDateFormatted = moment(cellDate, 'MM/DD/YYYY').format('YYYY-MM-DD');

                    if (cellDateFormatted === eventDate) {
                        // Add marker or indicator
                        cell.addClass('has-event').attr('title', title);
                        cell.append('<div class="event-indicator"></div>');
                    }
                });
            });

            // Prevent the event indicator from being removed on click
            $('.event-indicator').on('click', function(event) {
                event.stopPropagation();
            });
        }
    </script>
</body>
</html>

Conclusion

Implementing a Bootstrap DateTimePicker calendar with event markers enhances both the functionality and visual appeal of date management in web applications. By following this tutorial, you’ve learned how to seamlessly integrate a responsive calendar, mark important dates with custom indicators, and capture user interactions effectively.

The DateTimePicker plugin, coupled with jQuery and Moment.js, provides robust capabilities for date selection and event visualization. Whether you’re managing appointments, scheduling tasks, or displaying special occasions, this setup offers a user-friendly experience with intuitive navigation and interactive features.

By understanding the initialization process, event handling, and styling options, you can tailor the calendar to fit your application’s requirements and branding. Remember to consider accessibility standards and responsive design principles to ensure inclusivity and usability across different devices and user needs.

With these tools and techniques at your disposal, you’re equipped to implement a dynamic and functional calendar solution that enhances user engagement and productivity in your web projects. Experiment with different configurations and customization options to create a calendar that seamlessly integrates into your application’s workflow.

Start integrating Bootstrap DateTimePicker today and elevate your date management capabilities with ease and efficiency. Happy coding!