(Fullcalendar) Auto click days using back-end information

Question

I need my Fullcalendar to auto-click two dates, this is how i made my dayClick:

 dayClick: function (date) {
    if ($(this).css('background-color') == 'rgb(33, 115, 240)') {
      $(this).css({
        'background-color': 'white'
      })
    } else {
      $(this).css({
        'background-color': '#2173f0'
      })
    }
  }

It works fine, when i click a day, that day becomes blue, when i click it again, it turns white. The thing is, my user is selecting two days in an <input> tag, when those days are selected, i need fullcalendar to autoclick those days on itself, so they become blue.

This is the idea:

First you'll see a field where you type in two days,
fullcalendar will respond and turn those days blue,
then you'll select some other days using the fullcalendar itself

i wrote something like this:

  sendDate(val: any) { //this method will be called the the inputs are filled
    var dataIni =val.metasForm.value.gesMetasDtini;
    var dataFim =val.metasForm.value.gesMetasDtfim;
    //this gets the dates

    if (dataIni != null && dataFim != null) {
     $("#calendar").dayClick(dataIni);
     $("#calendar").dayClick(dataFim);
    }
  }

The thing is, this does not really turn those days blue. Is there any other way for me to do it?

EDIT: some more code

the calendar:

<div id="form-group" class="left" style="width: 90%">
            <ng-fullcalendar id="calendar"></ng-fullcalendar>
        <br><br>
</div>

the input:

<div id="form-group" class="left">
    <input id="ini" placeholder="Data de Início" type="text" 
        formControlName="gesMetasDtini" class="form-control" (change)="sendDate(this)">
    <br>
</div>

<div id="form-group" class="right">
    <input id="fim" placeholder="Data de Fim" type="text" 
    formControlName="gesMetasDtfim" class="form-control" (change)="sendDate(this)">
    <br>
</div>

The methods:

$('#calendar').fullCalendar({
  //selectable: true,
  header: {
    left: 'prev,next today',
    center: 'title',
    right: ''
  },
  dayClick: function (date) {

   // var DiaSemana = date._d.toString();
   // DiaSemana = DiaSemana.substring(0, 3);

   // if (DiaSemana == 'Sat' || DiaSemana == 'Fri') {
   //   console.log('fim de semana')
   // }

    if ($(this).css('background-color') == 'rgb(33, 115, 240)') {
      $(this).css({
        'background-color': 'white'
      })
    } else {
      $(this).css({
        'background-color': '#2173f0'
      })
    }
  }

});

Is it possible to past the whole code so we could test and modify the script. — Alen.Toma, Jan 22 '19 at 18:27
Try background events to keep a day highlighted in the colour of your choice. — Abu Nooh, Jan 22 '19 at 18:41
i dont know which fullcalander script you are using so add the whole things, script css etc we need to run this. — Alen.Toma, Jan 22 '19 at 19:09
`$("#calendar").dayClick(` ...there is no such method [documented](https://fullcalendar.io/docs#toc) in fullCalendar, so I'm not sure where you got the idea to use it. There's only the dayClick _callback_. Instead you must target the HTML element itself. Luckily, this element has data describing which day it is. So something like `$('.fc-day[data-date="2019-01-05"').css("background-color", "blue");` will work. Here's a demo which runs that code each time the view renders: http://jsfiddle.net/7nsbjya5/ . All you need to do now is integrate that with your `` control. — ADyson, Jan 23 '19 at 10:11
P.S. This is very similar to a previously asked question: [Any way to colorize specific days in FullCalendar?](https://stackoverflow.com/questions/2533240/any-way-to-colorize-specific-days-in-fullcalendar) — ADyson, Jan 23 '19 at 10:11
thanks @ADyson, it worked, if you post an answer, i'll accept it — CH4B, Jan 23 '19 at 12:58

score 1 · Accepted Answer · answered Jan 23 '19 at 14:41

From your code:

$("#calendar").dayClick(

...there is no such method documented in fullCalendar, so I'm not sure where you got the idea to use it. There's only the dayClick callback which you already know about.

Instead you must target the HTML element itself. Luckily, this element has data describing which day it is. So something like

$('.fc-day[data-date="2019-01-05"').css("background-color", "blue");

will work. Here's a demo which runs that code each time the view renders: http://jsfiddle.net/7nsbjya5 .

All you need to do now is integrate that with your <input> control in a suitable way to meet your requirement.

(Fullcalendar) Auto click days using back-end information

1 Answers1