CODEWITHSUNDEEP
javascripthtmlfullcalendarfullcalendar-5
Petro Gromovo
Petro Gromovo

Reputation: 2171

How to show 1 year calenadar with fullcalendarV5?

With fullcalendarV5 I want to show 1 year calenadar, like that http://embed.plnkr.co/xhahIV/

It is based on yearColumns property, which seems is not supported in V5. How can I implement 1 year calendar ?

Thanks in advance!

Upvotes: 1

Views: 163

Answers (1)

Tejas Gupta
Tejas Gupta

Reputation: 494

As already mentioned in comments, This is not provided in fullCalendar unfortunately. However you can use a custom made javascript calendar like this:

<script language="javascript">
<!--
// fill the month table with column headings
function day_title(day_name){
     document.write("<TD ALIGN=center WIDTH=35>"+day_name+"</TD>")
}
// fills the month table with numbers
function fill_table(month,month_length)
{ 
  day=1
  // begin the new month table
  document.write("<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=%3><TR>")
  document.write("<TD COLSPAN=7 ALIGN=center><B>"+month+"   "+year+"</B><TR>")
  // column headings
  day_title("Sun")
  day_title("Mon")
  day_title("Tue")
  day_title("Wed")
  day_title("Thu")
  day_title("Fri")
  day_title("Sat")
  // pad cells before first day of month
  document.write("</TR><TR>")
  for (var i=1;i<start_day;i++){
        document.write("<TD>")
  }
  // fill the first week of days
  for (var i=start_day;i<8;i++){
        document.write("<TD ALIGN=center>"+day+"</TD>")
        day++
  }
  document.write("<TR>")
  // fill the remaining weeks
  while (day <= month_length) {
     for (var i=1;i<=7 && day<=month_length;i++){
         document.write("<TD ALIGN=center>"+day+"</TD>")
         day++
     }
     document.write("</TR><TR>")
     // the first day of the next month
     start_day=i
  }
  document.write("</TR></TABLE><BR>")
}
// end hiding -->

</script>

<script language="javascript">

// CAHNGE the below variable to the CURRENT YEAR
year=2008

// first day of the week of the new year
today= new Date("January 1, "+year)
start_day = today.getDay() + 1   // starts with 0
fill_table("January",31)
fill_table("February",29)
fill_table("March",31)
fill_table("April",30)
fill_table("May",31)
fill_table("June",30)
fill_table("July",31)
fill_table("August",31)
fill_table("September",30)
fill_table("October",31)
fill_table("November",30)
fill_table("December",31)
</script>

I did this in a hurry so I did not do any styles and all, but you can do that according to your needs.

Upvotes: 1

Related Questions