Start calendar with current month

[krizajb]

I didn't find an option to display calendar (12 months) starting with specific Date, current month.

[krizajb]

I made a simple workaround by displaying two calendars, first displays current year months and second months of next year. In next step I have simply hidden the past months of current year and hidden the months of next year. All accepted months from next year are detached and appended to first calendar to support responsiveness.

  var currentMonth = new Date().getMonth();

  $('#first_calendar .month-container').each(function(idx, el){
    if (idx < currentMonth) {
      $(this).css("display","none");
    }
  })

  currentMonth -= 1;

  $('#second_calendar .month-container').each(function(idx, el) {
    if (idx > currentMonth) {
      $(this).css("display","none");
    } else {
      $('#second_calendar .month-container').first().detach().appendTo("#first_calendar");
    }
  })

Don't forget to set startYear: new Date().getFullYear() on first calendar and startYear: new Date().getFullYear()+1 on second calendar.

[Paul-DS]

You want to display something like that ?

Yes currently this is not managed, especially because the calendar is displayed for a given (unique) year. The HMI is not intended for that (current year displayed at the top, etc..)

[krizajb]

Yes, I needed that but as you can see I made a workaround, here is the solution (probably temporary address since it's not published yet, so I will update the url when so): http://www.shappa.si/koledar-new.html

[Paul-DS]

Ok super !

Given your example, I will add an option to remove the header. In this case it will not be present in the DOM (and not just hidden with CSS).

[Paul-DS]

I just added the option to display\hide the calendar header : displayHeader

[stevenbrown-85]

this solution is ok for just viewing the calendar but when trying to select a date range between December and January it doesn't work...

[jmrp81]

Thanks, It is a magnificent calendar @Paul-DS and the solution of the months has helped me @krizajb

[Paul-DS]

I know this thread is pretty old, but I'm working on this feature in the new version of the library: js-year-calendar
You can follow the development (and test the functionality) in the PR year-calendar#32

[Paul-DS]

The feature is available in js-year-calendar@v2.0.0. Check the options startDate and numberMonthsDisplayed in the documentation