CODEWITHSUNDEEP
jqueryfullcalendar
CH4B
CH4B

Reputation: 774

(Fullcalendar) Auto click days using back-end information

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'
      })
    }
  }

});

Upvotes: 1

Views: 299

Answers (1)

ADyson
ADyson

Reputation: 61794

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.

Upvotes: 1

Related Questions