Event Calendar with jQuery UI, PHP and MySQL

This example combines jQuery UI Datepicker, PHP and MySQL to let users choose a date and view its events. An administrator page can add or delete events.

Pages in the Event Calendar Script Top ↑

What the Script Does Top ↑

• Visitors select a date from a jQuery UI calendar.
• Only dates with events can be made selectable when required.
• All events for the selected day are displayed without reloading the complete page.
• An administrator can add multiple events for one date and delete events.

Use beforeShowDay to Control Selectable Dates Top ↑

The original script builds an array of dates that already contain events. The Datepicker beforeShowDay option can use that array to decide whether each calendar date should be selectable.

Learn jQuery UI Datepicker · Open the beforeShowDay demo

const availableDates = [
    "05-12-2026",
    "25-12-2026",
    "01-01-2027",
    "02-02-2027"
];

Create the JavaScript Date Array from MySQL Top ↑

Instead of manually concatenating JavaScript text, fetch the dates in PHP and pass the array through json_encode(). This preserves the original PHP-to-JavaScript technique while avoiding malformed output.

<?php
$sql = "
    SELECT DISTINCT DATE_FORMAT(date, '%d-%m-%Y') AS event_date
    FROM plus2net_event
    ORDER BY date
";

$availableDates = [];

foreach ($dbo->query($sql) as $row) {
    $availableDates[] = $row['event_date'];
}
?>
<script>
const availableDates =
    <?php echo json_encode($availableDates, JSON_UNESCAPED_SLASHES); ?>;
</script>

Load Events When the User Selects a Date Top ↑

The Datepicker onSelect callback receives the selected date. The example then uses jQuery .load() to request the backend page and place the returned event list inside #d1.

$( "#date_picker" ).datepicker({
    dateFormat: "dd-mm-yy",

    onSelect: function (selectedDate) {
        const url =
            "display-data.php?selectedDate=" +
            encodeURIComponent( selectedDate );

        $( "#d1" ).load( url );
    }
});

Read the Selected Date in PHP Top ↑

Validate the incoming date before querying the database. The following example converts the expected dd-mm-YYYY value to MySQL's YYYY-mm-dd format.

<?php
$input = $_GET['selectedDate'] ?? '';

$date = DateTime::createFromFormat('d-m-Y', $input);

if (!$date || $date->format('d-m-Y') !== $input) {
    http_response_code(400);
    exit('Invalid date');
}

$mysqlDate = $date->format('Y-m-d');
?>

Fetch Events with a Prepared Statement Top ↑

The original script placed the date directly into the SQL string. For a current PHP example, use a prepared statement.

<?php
$stmt = $dbo->prepare(
    'SELECT event_id, date, detail
     FROM plus2net_event
     WHERE date = :event_date
     ORDER BY event_id'
);

$stmt->execute(['event_date' => $mysqlDate]);

foreach ($stmt as $row) {
    echo htmlspecialchars($row['date'], ENT_QUOTES, 'UTF-8');
    echo ': ';
    echo htmlspecialchars($row['detail'], ENT_QUOTES, 'UTF-8');
    echo '<br>';
}
?>

Add and Delete Events Top ↑

The administration page at add-event/add.php lets an administrator choose a date, add event details, list existing events and delete an event. See the PDO insert tutorial for the database-insert pattern.

The downloadable project intentionally does not include a login system. If this is used on a public site, protect the administration page with authentication and authorization.

MySQL Table Top ↑

CREATE TABLE plus2net_event (
    event_id INT UNSIGNED NOT NULL AUTO_INCREMENT,
    date DATE NOT NULL,
    detail VARCHAR(256) NOT NULL,
    PRIMARY KEY (event_id),
    INDEX idx_event_date (date)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Install and Test the Script Top ↑

1. Download the ZIP file below and extract it in your PHP project.
2. Use the included SQL dump to create the table.
3. Open config.php and enter your database connection details.
4. Open add-event/add.php and add a few events.
5. Open display.php and choose a date that has an event.
6. Confirm that only the intended dates are selectable and that the event details load correctly.

Download Event Calendar ZIP

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: