Starting day of the week #433

fyco97 · 2024-12-20T11:39:43Z

Hello,

I apologize in advance if there is a solution already but I want to change first day of the week. Right now, week starts with Sunday. is there a way to change starting day of a week to Monday?

Thank you.

horilla-opensource · 2024-12-20T11:41:24Z

Hi @fyco97 ,

Were do you wish to change this? Like, we would like to know the use case of this so that we can provide a solution for this.

With Regards,
Team Horilla

fyco97 · 2024-12-20T11:44:29Z

I'd like to change that when employees want to request a leave. Screenshot bellow

horilla-opensource · 2024-12-24T06:07:10Z

Hi @fyco97 ,

Update the Base Template (templates/index.html)
Add the following Flatpickr links (CSS and JS) to the base template, index.html:
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
```
include within the <head> section of the template.
Add Flatpickr Initialization Code in the Base JavaScript File (static/index/index.js)
At the end of the index.js file, include the following code to initialize Flatpickr for all date fields:
```
flatpickr("input[type='date']", {
  locale: {
        firstDayOfWeek: 1 // Monday as the first day
      },
  dateFormat: "M j, Y", // Format as "Dec 31, 2024"
});
```
Supported Date Formats:
You can modify the dateFormat option to fit your needs. Here are some examples:
```
   Y-m-d: 2024-12-31 (default format).
   d/m/Y: 31/12/2024.
   M j, Y: Dec 31, 2024.
```

Update the JavaScript File for HTMX Select2 (static/build/js/htmxSelect2.js)
To ensure Flatpickr is applied to dynamically loaded date fields, update the htmxSelect2.js file.
Add the Flatpickr initialization code after the line:
$(document).on("htmx:afterSwap", async function (evt) {

After updation :

   $(document).on("htmx:afterSwap", async function (evt) {
       flatpickr("input[type='date']", {
           locale: {
                           firstDayOfWeek: 1 // Monday as the first day
                         },
           dateFormat: "M j, Y", // Format as "Dec 31, 2024"
        });

        // Load cached installed apps or fetch new data
        cachedInstalledApps = await loadFromLocalStorage();
        if (cachedInstalledApps) {
              loadScripts(cachedInstalledApps); // Use cached data
        } else {
                   $.ajax({
                                url: '/get-horilla-installed-apps/',
                                method: 'GET',
                                success: async function (response) {
                                               cachedInstalledApps = response.installed_apps;
                                               await saveToLocalStorage(cachedInstalledApps);
                                               loadScripts(cachedInstalledApps);
                                },
                                error: function (error) {
                                          console.error("Error fetching installed apps:", error);
                                }
                   });
              }
     });

Using the firstDayOfWeek variable, you can configure which weekday the week should start on.

fyco97 · 2024-12-24T11:05:36Z

I followed your instruction and it doesn't work. The only thing that changed is that I have three options for day, month, year

When I request a leave, date format is still month, day, year and Sunday is first day of a week

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Starting day of the week #433

Starting day of the week #433

fyco97 commented Dec 20, 2024

horilla-opensource commented Dec 20, 2024

fyco97 commented Dec 20, 2024 •

edited

Loading

horilla-opensource commented Dec 24, 2024

fyco97 commented Dec 24, 2024 •

edited

Loading

Starting day of the week #433

Starting day of the week #433

Comments

fyco97 commented Dec 20, 2024

horilla-opensource commented Dec 20, 2024

fyco97 commented Dec 20, 2024 • edited Loading

horilla-opensource commented Dec 24, 2024

fyco97 commented Dec 24, 2024 • edited Loading

fyco97 commented Dec 20, 2024 •

edited

Loading

fyco97 commented Dec 24, 2024 •

edited

Loading