How to create an event calendar in Datepicker and take data automatically from the database?

Question

JavaScript

How to create a calendar of events with selected dates and when clicked, linked to a separate page, but to take the data automatically. There is such a code, but the data must be entered manually. Not very strong in jquery.. Maybe there will be some useful links. Grateful.

var calendarEvents = ;
var calendarHref = ["https://stackoverflow.com","https://google.com"];

$("#datepicker1").datepicker({
    numberOfMonths: [1, 1],
    showCurrentAtPos: 0,
    beforeShowDay: function (date) {
        for (i = 0; i < calendarEvents.length; i++) {
            if (date.getMonth() == calendarEvents[i][0] - 1 && date.getDate() == calendarEvents[i][1] && date.getFullYear() == calendarEvents[i][2]) {

                return [true, "ui-state-active", calendarEvents[i][3]];
            }
        }
        return [true, ""];
    },
    onSelect: function(dateText, inst) {
        for (i = 0; i < calendarEvents.length; i++) {
            if (inst.selectedMonth == calendarEvents[i][0] - 1 && inst.selectedDay == (""+ calendarEvents[i][1]) && inst.selectedYear == calendarEvents[i][2]) {
                window.open(
                  calendarHref[i],
                  '_blank'
                );
            }
        }
    }
});

Answer 1

datapicker isn't for picking dates?
For the event calendar, it is better to use a calendar control, for example, fullcalendar.io
There, events (with links) are easily loaded by akax in json format or from a Google calendar.