Caricare eventi dinamicamente Jquery calendar

[pippuccio76]

HO un semplice calendario :

  <script type="text/javascript">
      $(".form-select").select2({
         theme: "bootstrap-5",

      });




      (function($) {

         "use strict";

         // Setup the calendar with the current date
         $(document).ready(function() {
            var date = new Date();
            var today = date.getDate();
            // Set click handlers for DOM elements
            $(".right-button").click({
               date: date
            }, next_year);
            $(".left-button").click({
               date: date
            }, prev_year);
            $(".month").click({
               date: date
            }, month_click);
            //$("#add-button").click({date: date}, new_event);
            // Set current month as active
            $(".months-row").children().eq(date.getMonth()).addClass("active-month");
            init_calendar(date);
            var events = check_events(today, date.getMonth() + 1, date.getFullYear());
            //show_events(events, months[date.getMonth()], today);
         });

         // Initialize the calendar by appending the HTML dates
         function init_calendar(date) {
            $(".tbody").empty();
            $(".events-container").empty();
            var calendar_days = $(".tbody");
            var month = date.getMonth();
            var year = date.getFullYear();
            var day_count = days_in_month(month, year);
            var row = $("<tr class='table-row'></tr>");
            var today = date.getDate();
            // Set date to 1 to find the first day of the month
            date.setDate(1);
            var first_day = date.getDay();
            // 35+firstDay is the number of date elements to be added to the dates table
            // 35 is from (7 days in a week) * (up to 5 rows of dates in a month)
            for (var i = 0; i < 35 + first_day; i++) {
               // Since some of the elements will be blank, 
               // need to calculate actual date from index
               var day = i - first_day + 1;
               // If it is a sunday, make a new row
               if (i % 7 === 0) {
                  calendar_days.append(row);
                  row = $("<tr class='table-row'></tr>");
               }
               // if current index isn't a day in this month, make it blank
               if (i < first_day || day > day_count) {
                  var curr_date = $("<td class='table-date nil'>" + "</td>");
                  row.append(curr_date);
               } else {
                  var curr_date = $("<td class='table-date'>" + day + "</td>");
                  var events = check_events(day, month + 1, year);
                  if (today === day && $(".active-date").length === 0) {
                     curr_date.addClass("active-date");
                     //show_events(events, months[month], day);
                  }
                  // If this date has any events, style it with .event-date
                  if (events.length !== 0) {
                     curr_date.addClass("event-date");
                  }
                  // Set onClick handler for clicking a date
                  curr_date.click({
                     events: events,
                     month: months[month],
                     day: day
                  }, date_click);
                  row.append(curr_date);
               }
            }
            // Append the last row and set the current year
            calendar_days.append(row);
            $(".year").text(year);
         }

         // Get the number of days in a given month/year
         function days_in_month(month, year) {
            var monthStart = new Date(year, month, 1);
            var monthEnd = new Date(year, month + 1, 1);
            return (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
         }

         // Event handler for when a date is clicked
         function date_click(event) {
            $(".events-container").show(250);
            $("#dialog").hide(250);
            $(".active-date").removeClass("active-date");
            $(this).addClass("active-date");

            var year = $('.year').text();


            //console.log(year + '|' + event.data.month);
            window.location.href = "<?= base_url('user_Events/lista_giorno/') ?>" + year + '-' + event.data.month + "-" + event.data.day;

            //show_events(event.data.events, event.data.month, event.data.day);
         };

         // Event handler for when a month is clicked
         function month_click(event) {
            $(".events-container").show(250);
            $("#dialog").hide(250);
            var date = event.data.date;
            $(".active-month").removeClass("active-month");
            $(this).addClass("active-month");
            var new_month = $(".month").index(this);
            date.setMonth(new_month);
            load_event(date);
            init_calendar(date);
            //console.log('mese:' + date.getFullYear() + '-' + (date.getFullMonth() + 1));

         }

         // Event handler for when the year right-button is clicked
         function next_year(event) {
            $("#dialog").hide(250);
            var date = event.data.date;
            var new_year = date.getFullYear() + 1;
            $("year").html(new_year);
            date.setFullYear(new_year);
            load_event(date);
            init_calendar(date);
         }

         // Event handler for when the year left-button is clicked
         function prev_year(event) {
            $("#dialog").hide(250);
            var date = event.data.date;
            var new_year = date.getFullYear() - 1;
            $("year").html(new_year);
            date.setFullYear(new_year);
            load_event(date);
            init_calendar(date);
            //console.log('data:' + new_year)
         }



         // Checks if a specific date has any events
         function check_events(day, month, year) {
            var events = [];
            for (var i = 0; i < event_data["events"].length; i++) {
               var event = event_data["events"][i];
               if (event["day"] === day &&
                  event["month"] === month &&
                  event["year"] === year) {
                  events.push(event);
               }
            }
            return events;
         }

   

         const months = [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
         ];

      // Given data for events in JSON format
         event_data = {
            "events": [
               {
                  "year": 2024,
                  "month": 8,
                  "day": 16
               },                     
               {

                  "year": 2024,
                  "month": 8,
                  "day": 31
               },
            ]
         };
         


      })(jQuery);
   </script>

che inserisce un pallino nei giorni dove trova gli events. come li carico dinamicamente ?


con questa funzione ajax :

         function load_event(date_start) {

            $.ajax({
               method: 'post',
               url: "<?= base_url('user_Events/loadDataAgenda') ?>",
               data: {
                  data_inizio: date_start,
               },
               success: function(data) {
                  
                  event_data={
                     "events":data
                  }

                  console.log (event_data);
               },
               error: function(error) {
                  console.error('Error get event:');
               }
            });

            //console.log(date_start);
         }

Che mi restituisce year month e day degli eventi formattati correttamente, come faccio a darli in pasto allo script precedente ?

[alka]

HO un semplice calendario [...]
Che mi restituisce year month e day degli eventi formattati correttamente, come faccio a darli in pasto allo script precedente ?

Il codice non è che sia scritto benissimo e chiarissimo: è parecchio ingarbugliato, quindi capire come integrare le due parti significa leggerselo tutto, formattarlo, analizzarlo e fornire la risposta.

Fornisci altri tipi di informazioni: qual è il plugin JQuery usato per il calendario? Hai controllato nella documentazione relativa quali sono le opzioni per caricare dati tramite AJAX?

[alka]

HO un semplice calendario [...]
Che mi restituisce year month e day degli eventi formattati correttamente, come faccio a darli in pasto allo script precedente ?

Il codice non è che sia scritto benissimo e chiarissimo: è parecchio ingarbugliato, quindi capire come integrare le due parti significa leggerselo tutto, formattarlo, analizzarlo e fornire la risposta.

Fornisci altri tipi di informazioni: qual è il plugin JQuery usato per il calendario? Hai controllato nella documentazione relativa quali sono le opzioni per caricare dati tramite AJAX?

[pippuccio76]

In realtà non trovo nessuno script js quindi tutto quello che lo carica è quel codice più il css.

il codice mi sembra questo :

https://gist.github.com/harish-edula

ma sinceramentenon ricordo da dove l'ho preso

Nel caso a me serve un calendaario minimale (non il fullcalendar) con anno mese e giorno e nel
quale si possano caricare i dati via ajax (più che altro mi interessa che siano evidenziate le date con gli eventi inseriti con un pallino o un cambio di background, hai da indicarmene qualcuno piuttosto semplice ?