Пользовательский массив DatePicker для jquery - PullRequest
Новая
       178

Пользовательский массив DatePicker для jquery

0 голосов
/ 09 апреля 2020

Я использую Jquery datepicker.

Я добавил массив следующим образом: 

eventos:[{ date1: "04/18/2020", type:  "blue" }, { date1:  "04/13/2020", type: "red" },{ date1:  "04/28/2020", type: "yellow" }, { date1:  "04/14/2020", type: "yellow" }],

Этот массив представляет дневные события. Я представляю эти события с цветными точками в календаре. Например, в календаре у меня будет голубая точка 18 апреля. Это для всех элементов массива.

index. html

$('#datepickerSessions').datepicker({//creació calendari

                            dateFormat: 'dd/mm/yy',
                            eventos:[{ date1: "04/18/2020", type:  "blue" }, { date1:  "04/13/2020", type: "red" },{ date1:  "04/28/2020", type: "yellow" }, { date1:  "04/14/2020", type: "yellow" }],
                            numberOfMonths: 1,
                            minDate: minDate,//per evitar que mostri mesos passats
                            inline: true,
                            firstDay: 1, // primer día de la semana (Lunes)*/
                            onSelect: function(date,value){
                                showLoading();                            
                                $("#fecha_session").html(date);
                                $("#fecha_session_unic").html(date);// si ciclo
                                $("#dataVisita").val(date);

                                $("#datepickerSessions").val(date);
                                $("#escogerDia").css("display","block");
                                if(mostarHorari){
                                    contPortesObertes=0;
                                    cargarSessiones();
                                    moreInfoCalSession('calendarSessions');
                                }else{
                                    $("#tabla_horarios").children().remove();
                                    $(".seccionSession").show();
                                    $(".titulo-pagina.seccionSession").hide();
                                    hideLoading();
                                    fPuertasAbiertasNoS();
                                }

                                $("#calendarSessions").css("display","none");
                                $(".leyend_calSession").css("display","none");   
                            },
                         });

Я изменил jquery -ui. js для печати следующих цветов: https://code.jquery.com/ui/1.10.4/jquery-ui.js

Я изменил метод _generate HTML. Это настолько экстенсивно, я только скопировал часть, где я вызываю функцию для печати цветов событий (когда фактический день печатается на итерации) this._generateEvents HTML (printDate) 


    /* Generate the HTML for the current state of the date picker. */
    _generateHTML: function( inst ) {
         ( printDate.getTime() === today.getTime() ? " ui-state-highlight" : "" ) +
                            ( printDate.getTime() === currentDate.getTime() ? " ui-state-active" : "" ) + 
                            ( otherMonth ? " ui-priority-secondary" : "" ) + 
                            "' href='#'>" + printDate.getDate() + "</a>" + this._generateEventsHTML(printDate) ))+ "</td>"; 
    }

_generateEventsHTML: function(diaActual) {

        var html = "<div class='dot-container'>";
        var trobat = false;
        var resultat = "";
        var htmlEvent = "";

        if (this._defaults.eventos != null){
            for(var i=0; i < this._defaults.eventos.length; i++) {
                var dateEvent = new Date(this._defaults.eventos[i].date1);
                var diaEvent = dateEvent.getDate();
                var monthEvent = dateEvent.getMonth();
                var yearEvent = dateEvent.getFullYear();

                if (diaEvent == diaActual.getDate() && monthEvent == diaActual.getMonth() && yearEvent == diaActual.getFullYear()) {

                    trobat = true;
                    htmlEvent = htmlEvent + "<div class='dot "+ this._defaults.eventos[i].type + "'></div>";
                }
            }
            if (trobat) resultat = html+htmlEvent+"</div>";
        }

        return resultat;


.dot-container {
    text-align: center;
    position: absolute;
}


.dot{
  width: 8px !important; 
  height: 8px !important;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
}

.red{
   background-color: red !important;
}
.blue{
   background-color: blue !important;
}
.yellow{
  background-color: yellow !important;
}

Как я могу инициализировать массив событий внутри jquery -ui. js? Я хочу скопировать этот массив в _defaults, выполнив jQuery .extend (). Является ли это возможным? Если я передам событие массива _defaults, мой код будет работать правильно.

Или, может быть, мне придется сделать это по индексу. html, например, beforeShowDay, и обработать массив событий?

...