Calendar range picker styling


Is there a possibility to reach the below range date picker calendar styling


specially the style of the start and end date selected, I couldn’t find any specific styling for the start and end date,

I managed to reach the below design but it’s still away from the requested one



Try with css styles pseudoclasses like :first-child and last-child.
I don’t try bit maybe you can test.

Thanks for the hint, the problem of the rangsclasses I can’t specify different class name for the start date and the end date, and this my man issue

I didn’t try this approach if you have some example that will be great

many thanks

            // string CSS class name for this range in "cssClass" property
            cssClass: 'day-october', //string CSS class
            // Date Range in "range" property
            range: function (date) {
                return date.getMonth() === 9

I tried the above example but seems is not working at all

// Range Picker
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
var calendarRange = app.calendar.create({
  inputEl: '#date-calendar-range',
  rangePicker: true,
  //value: [new Date()],
  backdrop: true,
  weekHeader: true,
  firstDay: 0,
  weekendDays: [5, 6],
  //dateFormat: 'mm/dd/yyyy',
   dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' },
  maxDate: new Date(),
  dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    rangesClasses: [
        //Add "day-october' class for all october dates
            // string CSS class name for this range in "cssClass" property
            cssClass: 'color-blue', //string CSS class
            // Date Range in "range" property
            range: function (date) {
                console.log(date.getMonth() + " - " + (date.getMonth() === 3) ) ;
                return date.getMonth() === 3
        //Add "day-holiday" class for 1-10th January 2016
            cssClass: 'color-red',
            range: {
                from: new Date(),
                to: new Date()
   // header: true,
   // headerPlaceholder: '<div class="center">AAAAAA</div>',
  renderToolbar: function () {
    return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
      '<div class="toolbar-inner">' +
        '<div class="left">' +
          '<a href="#" class="link icon-only"><i class="img-back-mini ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
        '</div>' +
        '<div class="center" id="calendar_header_center"></div>' +
        '<div class="right">' +
          '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
        '</div>' +
	  '</div>' +
  on: {
    init: function (c) {
        console.log("calender init done");
        $$('.calendar-custom-toolbar .toolbar-inner .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
        $('.calendar-custom-toolbar .left .link').on('click', function() {
        $('.calendar-custom-toolbar .right .link').on('click', function() {

        $$('.icon .icon-back').on('click', function () {
        $$('.icon .icon-forward').on('click', function () {

    },  monthYearChangeStart: function (c) {
        $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] +', ' + c.currentYear);
    }, dayClick: function(el) {
      } , opened: function () {
    } ,  closed: function () {
     }, change: function () {
          if((categoryDevice.getValue()!== null && categoryDevice.value !=="") || (calendarRange.getValue()!== null && calendarRange.getValue().length > 0)) {
          } else {

Is there is any problem in my code?

output as below


Maybe this will help you

Range Pickey add .calendar-day-selected class to slected days.
You need to find the first and last and add a different class.

var firstspan = $$('.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:first'),
    lastspan = $$('.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:last');

Don’t try it, but i think it could work.

1 Like

when I’m trying to use
var firstspan = $$(’.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:first’),
lastspan = $$(’.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:last’);

I got the below error in the console
$$(’.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:first’)
framework7.bundle.min.js:13 Uncaught DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:first’ is not a valid selector.

I also tried to add this class to my CSS file but it give not affect
.calendar-range .calendar-day.calendar-day-selected .calendar-day-number:first {
background-color: red;

any help :frowning_face: thanks

Framework7 Calendar does not provide any special classes for first and last selected day in a date range.

Moreover, due to complex HTML structure of Calendar, we cannot just use :nth-of-type or :nth-child CSS selectors for applying styles. What we need here is :nth-class kind of selector, which is unfortunately not available as of CSS3 specification.

Therefore we will need to use both JavaScript and CSS for styling. JS will add appropriate classes to first and last day of date range, while CSS will style those classes.

So, this is what I came up with:

In your Calendar instance, you will need to add some code inside dayClick and opened event listeners

var datepicker = app.calendar.create({
					inputEl: '#datepicker-date-range',
					dateFormat: 'MM dd yyyy',
					rangePicker: true,
                    on: {
                        dayClick: function(calendar, dayEl, year, month, day) {

                            var previousSelectedDays = calendar.$el.find('.calendar-day-selected-range');

                            if (previousSelectedDays.length > 1) {
                                previousSelectedDays.forEach(function(el) {


                        opened:function(calendar) {
                            var selectedDays = calendar.$el.find('.calendar-day-selected:not(.calendar-day-prev):not(.calendar-day-next)');
                            if (selectedDays.length) {

And then use this CSS for styling:

.calendar-range .calendar-day.calendar-day-selected {
        align-items: center;

    .calendar-range .calendar-day.calendar-day-selected.calendar-day-selected-range {
        align-items: stretch;

    .calendar-range .calendar-day.calendar-day-selected.calendar-day-selected-range .calendar-day-number {
        background: #FF0000;

The result will look like this:


The JS functionality is working properly, you can change the CSS as per your needs.

1 Like

Thanks pmsgz, it’s working find

I wonder if I will be able to add specific class for the start date and end date, I want to add this because I want to make the start style different than the end one


if you can see the start has to add extra back ground in the right to link the rang, and also the end style I need to add style to in the left to link it with the rang

how can achieve this implementation

Many thanks