You can create inline calendars on your website with the assistance of the jsCalendar, which is a Javascript Library that is entirely modifiable by the user. It features a variety of calendar views as well as a wide range of color schemes.

It is one of the greatest libraries to easily build a calendar with date and time, and it does not matter whether you need a plain calendar or an event calendar.

You are given unrestricted control over how its functionality is handled. Additionally, you have the ability to simply customize it thanks to the different variations. It adapts to the screen size of the device being used and functions effectively.

This calendar is compatible with a variety of languages and includes support for 9+ languages right out of the box.

The JavaScript Calendar Library has the following features:

• You have the option of using the Default, Material Design, or Classic theme that comes pre-installed.
• Each motif features five distinct color schemes, including blue, yellow, orange, red, and green respectively.
• There are no limits on how to handle the function thanks to the API method and events.
• Support is included for more than nine different languages.

The most fundamental usage requires nothing more than the addition of jsCalendar's Javascript file and CSS stylesheet file to your HTML page.

If you want the calendar to be displayed in a certain language, you will need to add a language file.

<script src="jsCalendar.lang.tr"></script>

If you wish to use the dark color scheme, then you will need to include a file called jsCalendar.darkseries.css to your calendar.

<link rel="stylesheet" type="text/css" href="jsCalendar.darkseries.css">

It is necessary for you to define a div with the ID "my-calendar" before you can display the calendar on your website.

<div id="my-calendar"></div>

You are able to perform an automatic initialization of the calendar by utilizing the class known as "auto-jsCalendar."

<div class="auto-jsCalendar"></div>

Simply include another class in the color scheme that you select.

<div class="auto-jsCalendar black-theme"></div>

You can personalize the calendar with whatever motif you like.

<!-- Material theme -->
<div class="auto-jsCalendar material-theme"></div>
<!-- Classic theme -->
<div class="auto-jsCalendar classic-theme"></div>
<!-- Green theme -->
<div class="auto-jsCalendar green"></div>
<!-- Blue theme -->
<div class="auto-jsCalendar blue"></div>
<!-- Yellow theme -->
<div class="auto-jsCalendar yellow"></div>
<!-- Orange theme -->
<div class="auto-jsCalendar orange"></div>
<!-- Red theme -->
<div class="auto-jsCalendar red"></div>

All conceivable calendar possibilities.

jsCalendar.new(element, "24/09/2022",{

                // language
                language : "en",
              
                // Enable/Disable date's number zero fill
                zeroFill : false,
              
                // Custom month string format
                // month: Month's full name "February"
                // ##: Month's number  "02"
                // #: Month's number  "2"
                // YYYY: Year  "2022"
                monthFormat : "month",
              
                // Custom day of the week string forma
                // day: Day's full name "Monday"
                // DDD: Day's first 3 letters "Mon"
                // DD: Day's first 2 letters "Mo"
                // D: Day's first letter  "M"
                dayFormat : "D",
              
                // 1 = monday
                firstDayOfTheWeek: 1
              
                // Enable/Disable month's navigation buttons.
                navigator : true,
              
                // both | left | right
                navigatorPosition : "both",
              
                // min date
                min : false,
              
                // max date
                max : false
                
              });

API methods.

If you want to see the next month in jsCalendar, change the date to / now. next()

You can travel back a month by using the jsCalendar.previous(); code.

A new date will be set in code.

jsCalendar.set("24/09/2022");

To update the calendar, call jsCalendar.refresh();

In order to jump to January 30, 2022, type jsCalendar.goto("24/09/2022")

jsCalendar.reset(); / let the schedule recover

jsCalendar.setLanguage("tr"); / switch the calendar's language

The minimum and maximum dates must be set in code.

Events can be found between jsCalendar.min("now") and jsCalendar.max("now") right now.

Whenever the user clicks on a date in the calendar, the function eventDate is called.

For example: jsCalendar.onMonthChange(function(event, date) / On month change );