To use dhtmlxCalendar in your application, you need to take the following simple steps:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxCalendar</title>
<script type="text/javascript" src="../../codebase/calendar.js"></script>
<link rel="stylesheet" href="../../codebase/calendar.css">
</head>
<body>
<div id="calendar_container"></div>
<script> // creating dhtmlxCalendar
var calendar = new dhx.Calendar("calendar_container");
</script>
</body>
</html>
Related sample: Calendar. Basic Initialization
Create an HTML file and place full paths to JS and CSS files of dhtmlxCalendar into the header of the created file. The Calendar component can be used standalone or as a part of the Suite library.
If you use dhtmlxCalendar standalone, you need to include 2 files:
<link type="text/css" href="../codebase/calendar.css">
<script src="../codebase/calendar.js" type="text/javascript"></script>
If you use dhtmlxCalendar as a part of the Suite package, you need to include JS/CSS files of the dhtmlxSuite library:
<link type="text/css" href="../codebase/suite.css">
<script src="../codebase/suite.js" type="text/javascript"></script>
You can initialize Calendar in a container or in a popup.
In this case you initialize Calendar with the dhx.Calendar
object constructor. The constructor takes two parameters:
index.html
<div id="calendar_container"></div>
index.html
// creating dhtmlxCalendar
var calendar = new dhx.Calendar("calendar_container",{
// config options
});
Related sample: Calendar. Basic Initialization
This variant pressupposes that you create a popup first and then attach a calendar into it, thus creating a date picker.
<input type="text" id="date-input" style="width: 200px;" readonly/>
var calendar = new dhx.Calendar(null, {dateFormat: "%d/%m/%y"});
var popup = new dhx.Popup();
popup.attach(calendar);
var dateInput = document.getElementById("date-input");
dateInput.addEventListener("click", function() {
popup.show(dateInput);
});
calendar.events.on("change", function() {
dateInput.value = calendar.getValue();
popup.hide();
});
Related sample: Calendar. Date Picker
There is a list of properties that you can specify in the Calendar configuration object (the second parameter of the constructor function):
css | adds style classes to Calendar |
date | defines the date that will be opened when the calendar is created, differs from the selected date (set by value) |
dateFormat | defines the format of dates in Сalendar, "%d/%m/%y" by default |
disabledDates | allows disabling some date intervals, day labels are dimmed |
mark | adds a CSS class to specific days |
mode | the mode of Calendar initialization: "calendar" (default), "month", "year" |
range | enables/disables the possibility to select a range of dates on the calendar |
thisMonthOnly | hides dates of the previous/next months relative to the currently displayed one |
timeFormat | defines the time format for a timepicker in the calendar: 12-hour or 24-hour (12 or 24 (default), correspondingly) |
timePicker | adds a timepicker into the calendar, false by default |
value | selects the day (adds a round blue marker) |
weekNumbers | defines whether to show the numbers of weeks, false by default |
weekStart | sets the starting day of the week: "monday" or "sunday" (default) |
width | adds a timepicker into a calendar, false by default |
The detailed information on configuration options can be found in the Configuration article.
You can specify what date should be selected in the calendar both before and after initialization of the component:
index.html
var calendar = new dhx.Calendar("calendar_container", {
value: new Date(2019,1,10)
});
index.html
var calendar = new dhx.Calendar("calendar_container", {
// configuration options
});
calendar.setValue(new Date(2019,1,10));
Related sample: Calendar. Preset Selected Date
Back to top