HO un semplice calendario :
che inserisce un pallino nei giorni dove trova gli events. come li carico dinamicamente ?codice:<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>
con questa funzione ajax :
Che mi restituisce year month e day degli eventi formattati correttamente, come faccio a darli in pasto allo script precedente ?codice: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); }
Rispondi quotando
Originariamente inviata da pippuccio76
