使用完整的日历功能在事件框中设置每种不同的颜色 [英] Set each different color in the event box with full calendar function

问题描述

我在设置完整日历功能的每个事件框中设置颜色时遇到问题.目前，我只能在fc-daygrid-event-dot中进行设置.我可以在每个事件框中设置背景颜色吗?

I have a problem setting the color in each event box in the full calendar function. Currently, I just can set in the fc-daygrid-event-dot. May I know how to set the background color in each event box?

下面是我的编码:

 document.addEventListener('DOMContentLoaded', function() {
    // titleFormat: 'MMMM D, YYYY' 
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      initialDate: '2021-04-25',
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      
      
      select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
      eventClick: function(arg) {
        if (confirm('Are you sure you want to delete this event?')) {
          arg.event.remove()
        }
      },
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: <?php echo json_encode($myArray); ?>
    });
    calendar.render();   
  });

这是我的 json_encode($ myArray); 数据:

[{"title":"All Day Event","start":"2016-01-01 00:00:00","color":"#40E0D0"},{"title":"Long Event","start":"2016-01-07 00:00:00","color":"#FF0000"},{"title":"Repeating Event","start":"2016-01-09 16:00:00","color":"#0071c5"},{"title":"Conference","start":"2016-01-11 00:00:00","color":"#40E0D0"},{"title":"Meeting","start":"2016-01-12 10:30:00","color":"#000"},{"title":"Lunch","start":"2016-01-12 12:00:00","color":"#0071c5"},{"title":"Happy Hour","start":"2016-01-12 17:30:00","color":"#0071c5"},{"title":"Dinner","start":"2016-01-12 20:00:00","color":"#0071c5"},{"title":"Birthday Party","start":"2016-01-14 07:00:00","color":"#FFD700"},{"title":"Double click to change","start":"2016-01-28 00:00:00","color":"#008000"},{"title":"13245132","start":"2021-03-31 00:00:00","color":"undefin"},{"title":"asfsa","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"52115","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"624","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"512","start":"2021-04-04 00:00:00","color":"#FF0000"},{"title":"21512","start":"2021-04-06 00:00:00","color":"#FF0000"},{"title":"236234","start":"2021-04-07 00:00:00","color":"#FF0000"},{"title":"3521","start":"2021-04-03 00:00:00","color":"#00FF00"},{"title":"HHH","start":"2021-04-02 00:00:00","color":"#FFFF00"},{"title":"test","start":"2021-03-30 00:00:00","color":"#378006"},{"title":"asfsa","start":"2021-03-28 00:00:00","color":"#378006"},{"title":"ok","start":"2021-03-29 00:00:00","color":"#378006"},{"title":"ok","start":"2021-04-01 00:00:00","color":"#378006"},{"title":"ok","start":"2021-03-31 00:00:00","color":"#378006"},{"title":"555","start":"2021-04-16 00:00:00","color":"#378006"},{"title":"asfsa","start":"2021-03-28 00:00:00","color":"#FF0000"}]

现在我的结果就像下面的图片一样，每种颜色只能显示在点上:

Now my result like below the picture, each color just can show in the dot:

实际上，我希望得到如示例图片所示的预期结果:

Actually, I want the expected result like below the sample picture:

我尝试过的:我)我曾尝试在 json_encode($ myArray); 数据中将颜色更改为背景颜色，但仍然无法正常工作.

What I've tried： i）I have tried to change color to background-color in the json_encode($myArray); data, but still cannot work.

Swati结果:

推荐答案

您可以使用 eventDidMount 事件，您可以使用 .each 循环遍历json数组，然后我们需要获取添加事件的 td .

You can use eventDidMount event inside this you can use .each loop to iterate through your json array and then we need to get the td where events are added .

现在，如果您查看动态生成的 td ，您会找到 data-date 属性，因此使用此属性，则在同一日期可以有两个或多个事件，因此您可以使用您的json数组中的 title 键，并检查此值是否在 fc-event-title div中，或者最后不要使用 .closest(.fc-daygrid-event-harness")，并更改该div的背景色.

Now , if you look dynamically generated td you will find data-date attribute so use this attribute then there can two or more event on same date so you can use title key from your json array and check this value is there inside fc-event-title div or not lastly use .closest(".fc-daygrid-event-harness") and change back-ground color of that div.

演示代码 :

//suppose this is array
var arrays = [{
  "title": "All Day Event",
  "start": "2016-01-01 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Long Event",
  "start": "2016-01-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "Repeating Event",
  "start": "2016-01-09 16:00:00",
  "color": "#0071c5"
}, {
  "title": "Conference",
  "start": "2016-01-11 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Meeting",
  "start": "2016-01-12 10:30:00",
  "color": "#000"
}, {
  "title": "Lunch",
  "start": "2016-01-12 12:00:00",
  "color": "#0071c5"
}, {
  "title": "Happy Hour",
  "start": "2016-01-12 17:30:00",
  "color": "#0071c5"
}, {
  "title": "Dinner",
  "start": "2016-01-12 20:00:00",
  "color": "#0071c5"
}, {
  "title": "Birthday Party",
  "start": "2016-01-14 07:00:00",
  "color": "#FFD700"
}, {
  "title": "Double click to change",
  "start": "2016-01-28 00:00:00",
  "color": "#008000"
}, {
  "title": "512",
  "start": "2021-04-04 00:00:00",
  "color": "#FF0000"
}, {
  "title": "21512",
  "start": "2021-04-06 00:00:00",
  "color": "#FF0000"
}, {
  "title": "236234",
  "start": "2021-04-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "3521",
  "start": "2021-04-03 00:00:00",
  "color": "#00FF00"
}, {
  "title": "HHH",
  "start": "2021-04-02 00:00:00",
  "color": "#FFFF00"
}, {
  "title": "test",
  "start": "2021-03-30 00:00:00",
  "color": "#378006"
}, {
  "title": "43",
  "start": "2021-03-28 00:00:00",
  "color": "#378006"
}, {
  "title": "ok",
  "start": "2021-03-29 00:00:00",
  "color": "#378006"
}, {
  "title": "o2k",
  "start": "2021-04-01 00:00:00",
  "color": "#378006"
}, {
  "title": "ok3",
  "start": "2021-03-31 00:00:00",
  "color": "#378006"
}, {
  "title": "5553",
  "start": "2021-04-16 00:00:00",
  "color": "#378006"
}, {
  "title": "asfsa",
  "start": "2021-03-28 00:00:00",
  "color": "#FF0000"
}]

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2021-04-25',
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectMirror: true,
    eventDidMount: function(view) {
      //loop through json array
      $(arrays).each(function(i, val) {
        //find td->check if the title has same value-> get closest daygird ..change color there
        $("td[data-date=" + moment(val.start).format("YYYY-MM-DD") + "] .fc-event-title:contains(" + val.title + ")").closest(".fc-daygrid-event-harness").css("background-color", val.color);
      })
    },
    select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
    eventClick: function(arg) {
      if (confirm('Are you sure you want to delete this event?')) {
        arg.event.remove()
      }
    },
    editable: true,
    dayMaxEvents: true,
    events: arrays //pass array here
  });

  calendar.render();


});

.fc-event-title {
  color: white
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id='calendar'></div>

这篇关于使用完整的日历功能在事件框中设置每种不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！