如何使用 fullcalendar V5 显示 1 年日历？答案

【问题标题】：How to show 1 year calenadar with fullcalendarV5?如何使用 fullcalendar V5 显示 1 年日历？
【发布时间】：2021-06-16 13:36:42
【问题描述】：

使用 fullcalendarV5 我想显示 1 年的日历，就像那样 http://embed.plnkr.co/xhahIV/

它基于 yearColumns 属性，在 V5 中似乎不支持。如何实现 1 年日历？

提前致谢！

【问题讨论】：

不幸的是，fullCalendar 中没有提供此项。您需要制作自己的自定义视图 - 请参阅 fullcalendar.io/docs/custom-view-with-js
注：它也没有在早期版本中提供。该 plunkr 必须包含一些额外的自定义代码。您也许可以重复使用其中的一部分，尽管渲染日历的方法与旧版本相比发生了很大变化

标签： javascript html fullcalendar fullcalendar-5

【解决方案1】：

正如 cmets 中已经提到的，不幸的是，fullCalendar 中没有提供此功能。但是，您可以像这样使用定制的 javascript 日历：

<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>

我做的很匆忙，所以我没有做任何样式，但你可以根据你的需要来做。

【讨论】：