javascriptlaravelfullcalendarfullcalendar-3

Changing Background Color and Text Color for Holidays in FullCalendar v3

I'm currently developing an attendance feature using FullCalendar v3. In addition to displaying event data, I also want to show information about holidays from the API APIHariLibur. If there is a holiday date from that API, I want to set the cell's background-color to "rgba(255, 156, 156, 0.2)".

I have already managed to change the background-color using the following code:

dayRender: function(date, cell) {
    var dateString = date.format("YYYY-MM-DD");

    // Periksa apakah tanggal tersebut adalah hari libur
    if (holidays.includes(dateString)) {
        cell.css("background-color", "rgba(255, 156, 156, 0.2)");
    }
},

However, I'm still struggling with changing the text color of the date number. How can I change the text color of the date to indicate that it's a holiday from the API mentioned earlier?

Here's the full code:

<div class="card-body">
 <div class="fc-overflow">
   <div id="myEvent"></div>
 </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        axios.get('https://raw.githubusercontent.com/guangrei/APIHariLibur_V2/main/holidays.json')
        .then(function (response) {
            // Tangani data libur nasional yang Anda ambil di sini
            var holidayData = response.data;

            // Proses data libur nasional menjadi format yang sesuai
            var holidays = [];
            for (var date in holidayData) {
                var dateString = date;
                holidays.push(dateString);
            }

            // Ambil data acara dari server Anda menggunakan Axios
            axios.get('{{ route('events.index') }}')
            .then(function (eventResponse) {
                // Tangani data acara Anda di sini
                var events = eventResponse.data;

                const modal = $('#modal-action');
                const token = document.head.querySelector('meta[name="csrf-token"]').content;

                $("#myEvent").fullCalendar({
                    height: 'auto',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    dayRender: function(date, cell) {
                        var dateString = date.format("YYYY-MM-DD");

                        // Periksa apakah tanggal tersebut adalah hari libur
                        if (holidays.includes(dateString)) {
                            cell.css("background-color", "rgba(255, 156, 156, 0.2)");
                        }
                    },
                    events: `{{ route('events.index') }}`,
                    editable: true,
                    navLinks: true,
                    fixedWeekCount: false,
                    weekNumbers: true,
                    weekNumbersWithinDays: true,
                });
            })
        })
        .catch(function (error) {
            console.error('Error fetching holiday data: ' + error);
        });
    });
</script>

You can see on the date 28, the output of cell.css("background-color", "rgba(255, 156, 156, 0.2)");, what I want to change the color of is the number 28 itself. enter image description here

Any help or guidance on how to achieve this would be greatly appreciated. Thank you!

Solution

  • Add CSS to holiday dates' text using edventAfterAllRender like below,

    eventAfterAllRender : function(){
  for(i of holidays){                   
    $("[data-date='"+i+"']").find('.fc-day-number').css('color','blue');                   
  }
},

    Here is live example of it,

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FullCalendar 3</title>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet">

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>

    <script>
        $(document).ready(function() {
            var holidays = ['2023-09-13','2023-09-17','2023-09-19'];
         
            $('#calendar').fullCalendar({
                // FullCalendar options and settings
                defaultView: 'month',
                eventRender: function(event, element) {
                    var targetDate = moment('2023-09-14'); 
                    if (event.start.isSame(targetDate, 'day'))                     {
                        
                        element.css('color', 'red'); 
                    }
                
                },
                events: [
                    {
                        title: 'Event 1',
                        start: '2023-09-13T10:00:00',
                    },
                    {
                        title: 'Event 2',
                        start: '2023-09-14T14:00:00',
                    },
                ],
                eventAfterAllRender : function(){
                    for(i of holidays){
                    
                            $("[data-date='"+i+"']").find('.fc-day-number').css('color','blue');
                   
                    }
                },
              
            });
        });
    </script>
</head>
<body>
    <div id="calendar"></div>
</body>
</html>