Dears
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
Thanks
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
https://framework7.io/docs/calendar.html#rangesclasses
{
// 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
<script>
// 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>' +
'</div>';
},
on: {
init: function (c) {
console.log(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() {
calendarRange.prevMonth();
});
$('.calendar-custom-toolbar .right .link').on('click', function() {
calendarRange.nextMonth();
});
$$('.icon .icon-back').on('click', function () {
calendarRange.prevMonth();
});
$$('.icon .icon-forward').on('click', function () {
calendarRange.nextMonth();
});
}, monthYearChangeStart: function (c) {
$$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] +', ' + c.currentYear);
}, dayClick: function(el) {
console.log(el);
} , opened: function () {
$$("#date-calendar-range-icon").removeClass('fa-chevron-down');
$$("#date-calendar-range-icon").addClass('fa-chevron-up');
} , closed: function () {
$$("#date-calendar-range-icon").removeClass('fa-chevron-up');
$$("#date-calendar-range-icon").addClass('fa-chevron-down');
}, change: function () {
if((categoryDevice.getValue()!== null && categoryDevice.value !=="") || (calendarRange.getValue()!== null && calendarRange.getValue().length > 0)) {
$("#searchBtn").removeClass('disabled');
} else {
$("#searchBtn").addClass('disabled');
}
}
}
});
</script>
Is there is any problem in my code?
output as below
thanks
Maybe this will help you https://stackoverflow.com/questions/4082600/select-first-and-last-element-with-particular-class-using-jquery
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.
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 
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) {
el.classList.remove('calendar-day-selected-range');
});
}
dayEl.classList.add('calendar-day-selected-range');
},
opened:function(calendar) {
console.log(calendar);
var selectedDays = calendar.$el.find('.calendar-day-selected:not(.calendar-day-prev):not(.calendar-day-next)');
if (selectedDays.length) {
selectedDays[0].classList.add('calendar-day-selected-range');
selectedDays[selectedDays.length-1].classList.add('calendar-day-selected-range');
}
}
}
});
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.
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