The Dynamic Event Calendar is part of a tutorial!
https://tutorials.designfreaks.net/view/779

---
Usage:

Simply edit the sample events in the JavaScript section
at the end of the code in the index.html:

      // Events for specific dates (one-time)
      const events = {
        "2025-04-21": { icon: "✝️", text: "Easter Monday" },
      };

      // Recurring events every year (e.g. birthdays)
      const recurringEvents = {
        "01-01": { icon: "🎉", text: "New Year's Day" },
        "05-13": { icon: "🎂", text: "Nick's Birthday" },
        "10-31": { icon: "🎃", text: "Danny's Birthday & Halloween" },
        "12-24": { icon: "🎄", text: "Christmas" },
        "06-01": { icon: "🏳️‍🌈", text: "Pride Month" },
      };

The script will dynamically build the calendar and keeps it up to date.

---
Custom month labels

If you want to go one step further, you could also show custom month labels instead of the default January, February and so on. You could add custom icons, emojis or literally anything in the title bar here:

monthLabels: {
  1: "🎉 January 🎉",
  2: "💖 February 💖",
  10: "🎃 October 🎃",
  12: "🎄 December 🎄",
},

---
Custom weekdays

By default, weekdays are shown in the language you set in the locale setting, just like the month label is. If you prefer to set custom ones, you can simply override the localization by adding this in your config:

weekdayLabels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],

So your config could look like this:

// Calendar configuration
const calendarConfig = {
  showNav: true, // Show month navigation? true or false
  prevLabel: "❮", // Symbol for the Prev month link
  nextLabel: "❯", // Symbol for the Next month link
  locale: "en", // Language/locale code, e.g. "en", "de", "fr", "ja", "ru" etc
  weekStartsOn: 0, // 0 = Sunday, 1 = Monday
  showYear: true, // Show the year in the calendar title? true or false
  weekdayLabels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],

  // Optional: Custom month labels
  monthLabels: {
    1: "🎉 January 🎉",
    2: "💖 February 💖",
    10: "🎃 October 🎃",
    12: "🎄 December 🎄",
  },
};

---

Made with love by Designfreaks.net