4 different options

Jalendar offers you 4 different calendar options. You can list your events, you can link to days, you can use Jalendar Selector for date selecting and you can use Jalendar Range for range selecting on calendar.

Designing options

You can set multiple and unlimited colors to calendar's background, day colors, week colors and year color.

A lot of properties

You can use unlimited colors,
13 languages, date types. And you can change week start day. There is more option with plugin's properties.

See the Demos

Jalendar Event Jalendar Linker Jalendar Selector Jalendar Range

Jalendar Event

                                    <div id="yourId" class="jalendar">
    <div class="added-event" data-date="19-11-2021" data-link="http://google.com" data-title="WWDC 13 on San Francisco, LA"></div>
    <div class="added-event" data-date="19-11-2021" data-title="Hazal ve Bora Nikah Töreni"></div>
    <div class="added-event" data-date="10-12-2021" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
</div>

                                    $('#yourId').jalendar({
    customDay: '01/11/2021',
    color: '#577e9a', // Unlimited
    color2: '#57c8bf', // Unlimited
    lang: 'TR',
    sundayStart: true
});

Jalendar Linker

                                <div id="yourId2" class="jalendar"></div>

                                $('#yourId2').jalendar({
    color: '#fff',
    type: 'linker',
    customUrl: 'http://yourcustomurl.com/yourcustomurl?var=',
    dateType: 'mm-dd-yyyy',
    titleColor: '#666',
    weekColor: '#EA5C49',
    todayColor: '#EA5C49'
});

Jalendar Selector

                                <div id="yourId3" class="jalendar"></div>

                                $('#yourId3').jalendar({
    type: 'selector',
    dateType: 'yyyy-mm-dd',
    done: function() {
        alert( $('#yourId3 input.data1').val() );
    }
});

Jalendar Range

                                <div id="yourId4" class="jalendar"></div>

                                $('#yourId4').jalendar({
    color: '#37C4A7',
    type: 'range',
    lang: 'TR',
    selectingBeforeToday: true,
    done: function() {
        alert($('#yourId4 input.data1').val() + ' / ' + $('#yourId4 input.data2').val())
    }
});