DayPilot
Products
Support
DayPilot Modal
Examples
Documentation
Download
What's New
Home » Documentation » Default CSS Theme

Default CSS Theme

The default CSS theme (which is included in the library and applied automatically) defines the following styles.

Key CSS Classes

  • The modal_default_main CSS class marks the main box of modal dialog. The modal dialog borders and background are defined here.

  • The div that masks the rest of the page is marked with modal_default_background CSS class. It uses a semi-transparent background color.

  • The modal_default_form* classes are related to the built-in form support (see the DayPilot.Modal.form() method). The form items intentionally use only minimal styling (e.g., the theme doesn’t specify any font-family) so that they can inherit the global styles.

  • The buttons are styled using modal_default_ok and modal_default_cancel CSS classes.

Full CSS Definition

.modal_default_main {
    border: 10px solid #ccc;
    max-width: 90%;
}

.modal_default_main:focus {
    outline: none;
}

.modal_default_content,
.modal_default_input,
.modal_default_buttons,
.modal_default_form_item {
    padding: 10px 0px;
}

.modal_default_inner {
    padding: 20px;
}

.modal_default_buttons {
    margin-top: 10px;
}

.modal_default_ok,
.modal_default_cancel {
    padding: 3px;
    width: 80px;
}

.modal_default_background {
    opacity: 0.5;
    background-color: #000;
}

.modal_default_form_item {
    position: relative;
}

.modal_default_form_item_level1 {
    border-left: 2px solid #ccc;
    margin-left: 10px;
    padding-left: 20px;
}

.modal_default_form_item.modal_default_form_title {
    font-size: 1.5rem;
    font-weight: bold;
}

.modal_default_form_item input[type=text],
.modal_default_form_item textarea,
.modal_default_form_item input[type=select],
.modal_default_form_item select {
    width: 100%;
    box-sizing: border-box;
}

.modal_default_form_item textarea {
    height: 200px;
}

.modal_default_form_item label {
    display: block;
}

.modal_default_form_item_label {
    margin: 2px 0px;
}

.modal_default_form_item_image img {
    max-width: 100%;
    height: auto;
}

.modal_default_form_item_invalid {}

.modal_default_form_item_invalid_message {
    position: absolute;
    right: 0px;
    top: 9px;
    background-color: red;
    color: #ffffff;
    padding: 2px;
    border-radius: 2px;
}

.modal_default_form_item_date {
    position: relative;
}

.modal_default_form_item_date:after {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: 3px;
    width: 10px;
    height: 15px;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB3aWR0aD0iMTAiCiAgIGhlaWdodD0iMTUiCj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDUpIj4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0iZmlsbDojY2NjY2NjO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjM4MDM3MzM2O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBpZD0icmVjdDE5MjgiCiAgICAgICB3aWR0aD0iOS45MTUzMDYxIgogICAgICAgaGVpZ2h0PSIxMS4zNjkzNyIKICAgICAgIHg9IjAuMTE3MTg3NSIKICAgICAgIHk9Ii0zLjAwOTk5NTciCiAgICAgICByeT0iMS4zMTE4NTA1IiAvPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiNjY2NjY2M7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuNTk4MTQwMTI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0MTkzMCIKICAgICAgIHdpZHRoPSIxLjUzNDQxMzYiCiAgICAgICBoZWlnaHQ9IjIuMjE5ODI1IgogICAgICAgeD0iMi4xNTU4NDgzIgogICAgICAgeT0iLTQuMzkzNzAwMSIKICAgICAgIHJ5PSIwLjY3MTc4OTE3IiAvPgogICAgPHJlY3QKICAgICAgIHJ5PSIwLjI5NjAxNDciCiAgICAgICB5PSItMS4xNjU4NDY2IgogICAgICAgeD0iMS41MjM5NTA2IgogICAgICAgaGVpZ2h0PSIxLjgyOTkwOTEiCiAgICAgICB3aWR0aD0iMS44MzQyMjUxIgogICAgICAgaWQ9InJlY3QxOTQ4IgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS40MjE4OTE5MztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAvPgogICAgPHJlY3QKICAgICAgIHJ5PSIwLjY3MTc4OTE3IgogICAgICAgeT0iLTQuMzkzNzAwMSIKICAgICAgIHg9IjYuNDUyNzIzNSIKICAgICAgIGhlaWdodD0iMi4yMTk4MjUiCiAgICAgICB3aWR0aD0iMS41MzQ0MTM2IgogICAgICAgaWQ9InJlY3QyMDAzIgogICAgICAgc3R5bGU9ImZpbGw6I2NjY2NjYztmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS41OTgxNDAxMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAvPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuNDIxODkxOTM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0MjAwNSIKICAgICAgIHdpZHRoPSIxLjgzNDIyNTEiCiAgICAgICBoZWlnaHQ9IjEuODI5OTA5MSIKICAgICAgIHg9IjQuMjE5MjYzMSIKICAgICAgIHk9Ii0xLjE2NTg0NjYiCiAgICAgICByeT0iMC4yOTYwMTQ3IiAvPgogICAgPHJlY3QKICAgICAgIHJ5PSIwLjI5NjAxNDciCiAgICAgICB5PSItMS4xNjU4NDY2IgogICAgICAgeD0iNi45OTI3MDA2IgogICAgICAgaGVpZ2h0PSIxLjgyOTkwOTEiCiAgICAgICB3aWR0aD0iMS44MzQyMjUxIgogICAgICAgaWQ9InJlY3QyMDA3IgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS40MjE4OTE5MztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAvPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuNDIxODkxOTM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0MjAxMyIKICAgICAgIHdpZHRoPSIxLjgzNDIyNTEiCiAgICAgICBoZWlnaHQ9IjEuODI5OTA5MSIKICAgICAgIHg9IjEuNTIzOTUwNiIKICAgICAgIHk9IjEuODAyOTAzNCIKICAgICAgIHJ5PSIwLjI5NjAxNDciIC8+CiAgICA8cmVjdAogICAgICAgcnk9IjAuMjk2MDE0NyIKICAgICAgIHk9IjEuODAyOTAzNCIKICAgICAgIHg9IjQuMjE5MjYzMSIKICAgICAgIGhlaWdodD0iMS44Mjk5MDkxIgogICAgICAgd2lkdGg9IjEuODM0MjI1MSIKICAgICAgIGlkPSJyZWN0MjAxNSIKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuNDIxODkxOTM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjQyMTg5MTkzO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICBpZD0icmVjdDIwMTciCiAgICAgICB3aWR0aD0iMS44MzQyMjUxIgogICAgICAgaGVpZ2h0PSIxLjgyOTkwOTEiCiAgICAgICB4PSI2Ljk5MjcwMDYiCiAgICAgICB5PSIxLjgwMjkwMzQiCiAgICAgICByeT0iMC4yOTYwMTQ3IiAvPgogICAgPHJlY3QKICAgICAgIHJ5PSIwLjI5NjAxNDciCiAgICAgICB5PSI0LjczMjU5MDciCiAgICAgICB4PSIxLjU2MzAxMzEiCiAgICAgICBoZWlnaHQ9IjEuODI5OTA5MSIKICAgICAgIHdpZHRoPSIxLjgzNDIyNTEiCiAgICAgICBpZD0icmVjdDIwMTkiCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjQyMTg5MTkzO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIC8+CiAgICA8cmVjdAogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS40MjE4OTE5MztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIgogICAgICAgaWQ9InJlY3QyMDIxIgogICAgICAgd2lkdGg9IjEuODM0MjI1MSIKICAgICAgIGhlaWdodD0iMS44Mjk5MDkxIgogICAgICAgeD0iNC4yNTgzMjU2IgogICAgICAgeT0iNC43MzI1OTA3IgogICAgICAgcnk9IjAuMjk2MDE0NyIgLz4KICAgIDxyZWN0CiAgICAgICByeT0iMC4yOTYwMTQ3IgogICAgICAgeT0iNC43MzI1OTA3IgogICAgICAgeD0iNy4wMzE3NjMxIgogICAgICAgaGVpZ2h0PSIxLjgyOTkwOTEiCiAgICAgICB3aWR0aD0iMS44MzQyMjUxIgogICAgICAgaWQ9InJlY3QyMDIzIgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS40MjE4OTE5MztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiAvPgogIDwvZz4KPC9zdmc+Cg==)
}

.modal_default_form_item_scrollable_scroll {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    overflow-y: auto;
}

.modal_default_form_item_scrollable_scroll_content {
    padding: 5px;
}

.modal_default_form_item_searchable {
    position: relative;
}

.modal_default_form_item_searchable_icon {}

.modal_default_form_item_searchable_icon:after {
    content:'';
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -8px;
    width: 10px;
    height: 15px;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB3aWR0aD0iMTAiCiAgIGhlaWdodD0iMTUiCj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDUpIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDMxNzMiCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoxLjg1MTk2ODUzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIKICAgICAgIGQ9Ik0gMC45NTQxNDgzOCwwLjY4MTYwMzEgNS4wMzkwNjI1LDUuNDExNTM4NiA5LjEyMzk3NjYsMC42ODE2MDMxIgogICAgICAgIC8+CiAgPC9nPgo8L3N2Zz4K)
}

.modal_default_form_item_searchable_list {
    box-sizing: border-box;
    border: 1px solid #999;
    max-height: 150px;
    overflow-y: auto;
}

.modal_default_form_item_searchable_list_item {
    background: white;
    padding: 2px;
    cursor: default;
}

.modal_default_form_item_searchable_list_item_highlight {
    background: #ccc;
}

.modal_default_form_item_time {
    position: relative;
}

.modal_default_form_item_time_icon {}

.modal_default_form_item_time_icon:after {
    content:'';
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -8px;
    width: 10px;
    height: 15px;
    background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB3aWR0aD0iMTAiCiAgIGhlaWdodD0iMTUiCj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDUpIj4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDMxNzMiCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoxLjg1MTk2ODUzO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIKICAgICAgIGQ9Ik0gMC45NTQxNDgzOCwwLjY4MTYwMzEgNS4wMzkwNjI1LDUuNDExNTM4NiA5LjEyMzk3NjYsMC42ODE2MDMxIgogICAgICAgIC8+CiAgPC9nPgo8L3N2Zz4K)
}

.modal_default_form_item_time_list {
    box-sizing: border-box;
    border: 1px solid #999;
    max-height: 150px;
    overflow-y: auto;
}

.modal_default_form_item_time_list_item {
    background: white;
    padding: 2px;
    cursor: default;
}

.modal_default_form_item_time_list_item_highlight {
    background: #ccc;
}

.modal_default_form_item_datetime_parent {
    display: flex;
}

.modal_default_form_item_datetime .modal_default_form_item_time_main {
    margin-left: 5px;
}

.modal_default_form_item_datetime input[type='text'].modal_default_input_date {}

.modal_default_form_item_tabular_main {
    margin-top: 10px;
}

.modal_default_form_item_tabular_table {
    display: table;
    width: 100%;
}

.modal_default_form_item_tabular_tbody {
    display: table-row-group;
}

.modal_default_form_item_tabular_row {
    display: table-row;
}

.modal_default_form_item_tabular_row.modal_default_form_item_tabular_header {}

.modal_default_form_item_tabular_cell.modal_default_form_item_tabular_rowaction {
    padding: 0px;
    width: 23px;
}

.modal_default_form_item_tabular_cell {
    display: table-cell;
    border: 0px;
    padding: 2px 2px 2px 0px;
    cursor: default;
    vertical-align: bottom;
}

.modal_default_form_item_tabular_header .modal_default_form_item_tabular_cell {
    padding-left: 0px;
    padding-bottom: 0px;
}

.modal_default_form_item_tabular_table input[type=text],
.modal_default_form_item_tabular_table input[type=number],
.modal_default_form_item_tabular_table select {
    width: 100%;
    box-sizing: border-box;
}

.modal_default_form_item_tabular_table select {
    height: 100%;
}

.modal_default_form_item_tabular_plus {
    display: inline-block;
    background-color: #ccc;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
    margin-left: 3px;
    margin-top: 3px;
    cursor: pointer;
}

.modal_default_form_item_tabular_plus:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTSA1LjAgMC41IEwgNS4wIDkuNSBNIDAuNSA1LjAgTCA5LjUgNS4wJyBzdHlsZT0nZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbGluZWNhcDpidXR0JyAvPjwvc3ZnPg==");
}

.modal_default_form_item_tabular_delete {
    display: inline-block;
    background-color: #ccc;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
    margin-left: 3px;
    margin-top: 3px;
    cursor: pointer;
}

.modal_default_form_item_tabular_delete:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTSAwLjUgMC41IEwgOS41IDkuNSBNIDAuNSA5LjUgTCA5LjUgMC41JyBzdHlsZT0nZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbGluZWNhcDpidXR0JyAvPjwvc3ZnPg==");
}

.modal_default_form_item_tabular_disabled .modal_default_form_item_tabular_plus {
    display: none;
}

.modal_default_form_item_tabular_plus_max.modal_default_form_item_tabular_plus {
    display: none;
}

.modal_default_form_item_tabular_disabled .modal_default_form_item_tabular_delete {
    visibility: hidden;
}

.modal_default_form_item_tabular_empty {
    height: 1px;
    margin: 5px 23px 5px 0px;
    background-color: #ccc;
}

.modal_default_form_item_tabular_spacer .modal_default_form_item_tabular_cell {
    padding: 0px;
}


.navigator_modal_main {
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    background-color: white;
    color: #000000;
    box-sizing: content-box;
}

.navigator_modal_main *, 
.navigator_modal_main *:before, 
.navigator_modal_main *:after {
    box-sizing: content-box;
}

.navigator_modal_month {
    font-size: 11px;
}

.navigator_modal_day {
    color: black;
}

.navigator_modal_weekend {
    background-color: #f0f0f0;
}

.navigator_modal_dayheader {
    color: black;
    text-align: center;
}

.navigator_modal_line {
    border-bottom: 1px solid #c0c0c0;
}

.navigator_modal_dayother {
    color: gray;
}

.navigator_modal_todaybox {
    border: 1px solid red;
}

.navigator_modal_title, 
.navigator_modal_titleleft, 
.navigator_modal_titleright {
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    color: #333;
    background: #f3f3f3;
}

.navigator_modal_busy {
    font-weight: bold;
}

.navigator_modal_cell {
    text-align: center;
}

.navigator_modal_select .navigator_modal_cell_box {
    background-color: #FFE794;
    opacity: 0.5;
}

.navigator_modal_title {
    text-align: center;
}

.navigator_modal_titleleft, 
.navigator_modal_titleright {
    text-align: center;
}

.navigator_modal_weeknumber {
    text-align: center;
}

.navigator_modal_cell_text {
    cursor: pointer;
}

DayPilot Modal

Products

Tools

Resources

About Us

DayPilot Pro

Event calendar/scheduling AJAX components. Available for JavaScript/HTML5/jQuery, ASP.NET, ASP.NET MVC. Build resource booking, project management, time tracking applications, personal and shared event calendars.