在完整日历中将星期几添加到 resourceTimeGridDay

问题描述 投票:0回答:0

我们正在使用完整的日历版本 4,更具体地说是 resourceTimeGridDay,但令人讨厌的是,它没有在标题中显示我们想要的星期几。

我们怎样才能使这个显示为

2023 年 3 月 9 日,星期四

代替

2023 年 3 月 9 日

我们的代码如下

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>
<script src='../packages-premium/resource-common/main.js'></script>
<script src='../packages-premium/resource-daygrid/main.js'></script>
<script src='../packages-premium/resource-timegrid/main.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
    height:'auto',
      plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],


defaultView: 'resourceTimeGridDay',



columnFormat: {
            month: 'dddd',
            week: 'ddd d/M',
            day: 'dddd d/M'
        },


firstDay:1,
       
       
      editable: true,
      allDaySlot:false,
      displayEventTime: false,
      
      defaultDate:'2023-03-09',
      minTime:'06:00:00',
      maxTime:'14:00:00',
       Duration:'00:15:00',
         slotMinutes:'00:15:00',
      slotDuration:'00:15:00',
      selectable: true,
       allDaySlot:true,


      
 allDayText:'', 
      eventLimit: true, // allow "more" link when too many events
       nowIndicator:true,  
      header: {
        left: 'prev,next today',
        center: 'title,listWeek',
        right: 'listMonth'
      },


      views: {
        titleFormat: { year: 'numeric', month: '3-digit', day: '3-digit' } 
      },

      //// uncomment this line to hide the all-day slot
      //allDaySlot: false,

    


      resources: 'json/resources.php?id=8' ,


      events: 'json/events.php?id=8' ,
 
      eventRender: function(info) {
        info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
      },
      select: function(arg) {
        console.log(
          'select',
          arg.startStr,
          arg.endStr,
          arg.resource ? arg.resource.id : '(no resource)'
        );
      },
      dateClick: function(arg) {
   var datetime=arg.dateStr;
           var r = arg.resource.id;           
        
          window.open("addevent.php?type=customer&datetime="+datetime+"&r="+r, '_blank', 'width=900,height=900');               
      }
    });

    calendar.render();
  });

</script>

希望我们能把它变成一个更好的格式

预先感谢您的帮助

javascript html jquery fullcalendar fullcalendar-4
© www.soinside.com 2019 - 2024. All rights reserved.