Q - How to display am, pm in week and day view of FullCalendar JS Library in locale "th" ?

[Raja Pdl]

I am using FullCalendar in my project and I changed to locale "th". In the calendar view of timGridWeek and timeGridDay, it displays only 1:00, 2:00, 3:00, etc in time column. It doesn't display am, pm. It happens only in locale "th". If I use default locale "en", it displays am, pm.
How to make am, pm display in locale "th"

โค้ด: เลือกทั้งหมด

<div id="calendar"></div>
    
----

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'th',
        });
        calendar.render();
    });
</script>

[MindPHP Assistant]

When using FullCalendar with the Thai locale (`locale: 'th'`), it displays time formats according to Thai conventions, which typically use a 24-hour clock instead of AM/PM. To force the time grid to display AM/PM even in the Thai locale, you can customize the `slotLabelFormat` option to explicitly specify a 12-hour clock with AM/PM.

Here's how you can modify your FullCalendar configuration to achieve this:

โค้ด: เลือกทั้งหมด

html
<div id="calendar"></div>

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'th',
            slotLabelFormat: {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                hour12: true
            }
        });
        
        calendar.render();
    });
</script>

### Explanation

- **`hour: 'numeric'`**: This specifies that the hour should be displayed as a numeric value.
- **`minute: '2-digit'`**: This ensures that the minutes are displayed, but in this case, we use `omitZeroMinute: true` to hide the `:00` if it's zero.
- **`omitZeroMinute: true`**: This option will omit the minutes if they are zero, e.g., `1:00 AM` becomes `1 AM`.
- **`hour12: true`**: This explicitly sets the time format to 12-hour time with AM/PM.

By setting these options, you can customize the display of time in the `timeGridWeek` and `timeGridDay` views to include AM/PM, even when the calendar is set to use the Thai locale.

[Raja Pdl]

When using FullCalendar with the Thai locale (`locale: 'th'`), it displays time formats according to Thai conventions, which typically use a 24-hour clock instead of AM/PM. To force the time grid to display AM/PM even in the Thai locale, you can customize the `slotLabelFormat` option to explicitly specify a 12-hour clock with AM/PM.

Here's how you can modify your FullCalendar configuration to achieve this:

โค้ด: เลือกทั้งหมด

html
<div id="calendar"></div>

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'th',
            slotLabelFormat: {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                hour12: true
            }
        });
        
        calendar.render();
    });
</script>

### Explanation

- **`hour: 'numeric'`**: This specifies that the hour should be displayed as a numeric value.
- **`minute: '2-digit'`**: This ensures that the minutes are displayed, but in this case, we use `omitZeroMinute: true` to hide the `:00` if it's zero.
- **`omitZeroMinute: true`**: This option will omit the minutes if they are zero, e.g., `1:00 AM` becomes `1 AM`.
- **`hour12: true`**: This explicitly sets the time format to 12-hour time with AM/PM.

By setting these options, you can customize the display of time in the `timeGridWeek` and `timeGridDay` views to include AM/PM, even when the calendar is set to use the Thai locale.

It displays like this "12 ก่อนเที่ยง", "1 ก่อนเที่ยง",....., "1 หลังเทียง", "2 หลังเทียง", ...
But I want to display as "12 am", "1 am", ....., "1 pm", ..... in locale "th" also

[MindPHP Assistant]

To customize the time display in FullCalendar to show "am" and "pm" instead of the Thai equivalents ("ก่อนเที่ยง", "หลังเที่ยง") while using the Thai locale, you can override the language settings for these terms.

Here's how you can achieve this:

โค้ด: เลือกทั้งหมด

html
<div id="calendar"></div>

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'th',
            slotLabelFormat: {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                hour12: true
            },
            locales: [{
                code: 'th',
                buttonText: {
                    today: 'วันนี้'
                },
                weekText: 'สัปดาห์',
                allDayText: 'ตลอดวัน',
                moreLinkText: 'เพิ่มเติม',
                noEventsText: 'ไม่มีเหตุการณ์ที่จะแสดง',
                dayPopoverFormat: 'dddd, D MMMM YYYY',
                // Override AM/PM
                meridiemParse: /AM|PM/,
                isPM: (input) => input === 'PM',
                meridiem: (hour, minute, isLower) => hour < 12 ? 'AM' : 'PM',
                dateTimeLabelFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    hour12: true
                }
            }]
        });
        
        calendar.render();
    });
</script>

### Explanation:

- **`meridiemParse` and `isPM`**: These settings help FullCalendar understand the custom AM/PM.
- **`meridiem`**: This function is customized to return "AM" for times before noon and "PM" for times after noon.
- This configuration overrides the default Thai locale settings for AM/PM while keeping the other Thai localizations intact.

With this setup, your calendar will display times using "AM" and "PM" even when the Thai locale is selected.

[Raja Pdl]

To customize the time display in FullCalendar to show "am" and "pm" instead of the Thai equivalents ("ก่อนเที่ยง", "หลังเที่ยง") while using the Thai locale, you can override the language settings for these terms.

Here's how you can achieve this:

โค้ด: เลือกทั้งหมด

html
<div id="calendar"></div>

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'th',
            slotLabelFormat: {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                hour12: true
            },
            locales: [{
                code: 'th',
                buttonText: {
                    today: 'วันนี้'
                },
                weekText: 'สัปดาห์',
                allDayText: 'ตลอดวัน',
                moreLinkText: 'เพิ่มเติม',
                noEventsText: 'ไม่มีเหตุการณ์ที่จะแสดง',
                dayPopoverFormat: 'dddd, D MMMM YYYY',
                // Override AM/PM
                meridiemParse: /AM|PM/,
                isPM: (input) => input === 'PM',
                meridiem: (hour, minute, isLower) => hour < 12 ? 'AM' : 'PM',
                dateTimeLabelFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    hour12: true
                }
            }]
        });
        
        calendar.render();
    });
</script>

### Explanation:

- **`meridiemParse` and `isPM`**: These settings help FullCalendar understand the custom AM/PM.
- **`meridiem`**: This function is customized to return "AM" for times before noon and "PM" for times after noon.
- This configuration overrides the default Thai locale settings for AM/PM while keeping the other Thai localizations intact.

With this setup, your calendar will display times using "AM" and "PM" even when the Thai locale is selected.

No, it is not working, it is still displaying "ก่อนเที่ยง", "หลังเที่ยง"

[MindPHP Assistant]

If the provided code isn't overriding the AM/PM display as expected, you might need to use a different approach. FullCalendar uses Moment.js or Luxon for date formatting, depending on its version. To effectively override the AM/PM text while using the Thai locale, you can use the following approach:

### Step-by-Step Solution:

1. **Check FullCalendar Version**: Ensure you are using a version of FullCalendar that supports custom locale configuration and Moment.js or Luxon integration.

2. **Override Locale Settings**: If you're using Moment.js, you can customize the locale configuration directly. Here’s how you can override the Thai locale to use "AM" and "PM":

### JavaScript Code:

โค้ด: เลือกทั้งหมด

html
<div id="calendar"></div>

<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/5.10.1/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.1/locales/th.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Modify the Thai locale to change AM/PM
        moment.updateLocale('th', {
            meridiem: function(hour, minute, isLower) {
                return hour < 12 ? 'AM' : 'PM';
            },
            meridiemParse: /AM|PM/,
            isPM: function(input) {
                return input === 'PM';
            }
        });

        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'th',
            slotLabelFormat: {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                hour12: true
            },
            buttonText: {
                today: 'วันนี้',
                month: 'เดือน',
                week: 'สัปดาห์',
                day: 'วัน',
                list: 'รายการ'
            }
        });

        calendar.render();
    });
</script>

### Explanation:

- **Moment.js Locale Update**: We use `moment.updateLocale('th', {...})` to change the `meridiem`, `meridiemParse`, and `isPM` properties. This ensures that Moment.js, which FullCalendar might use internally for date formatting, outputs "AM" and "PM".

- **FullCalendar Configuration**: We set up FullCalendar with the Thai locale and specify `hour12: true` to ensure that time is displayed in a 12-hour format.

If you're using a version of FullCalendar that uses Luxon instead of Moment.js, let me know, and I can help you with adjustments for Luxon.

[Raja Pdl]

fixed by adding custom label with slotLableContent

added custom label, "am" , "pm" for period

โค้ด: เลือกทั้งหมด

var calendar = new FullCalendar.Calendar(calendarEl, {
 slotLabelFormat: {
    hour: 'numeric',  
    minute: '2-digit', 
    meridiem: 'short'
},
slotLabelContent: function(arg) {
    let hours = arg.date.getHours();
    let period = hours < 12 ? 'am' : 'pm';
    let displayHour = hours % 12 || 12;
        
    return {
        html: `${displayHour} ${period}`
    };
},