How to Color Events in FullCalendar?

Question

How to Color Events in FullCalendar?

Navigation

#1 by (0 votes)

-2

Coloring I can, but I need to colorize when selecting the vendor X, How to color different events in fullcalendar? based on an option ... example: I have 3 sellers, I want each seller to have his own color when clicking on the day to register an event, that he chooses through a modal. This mode is the event registration screen, where the seller chooses the Title, the name of the Seller, the start date and the end date .... when to choose the seller A the color in fullcalendar should be red, when choosing the Seller B the color should be blue and when you choose Seller C the color should be green ... thank you very much ...

    <label for="inputEmail3" class="col-sm-2 control-label">Salesman</label>
    <div class="col-sm-10">
    <select name="color" class="form-control" id="color">
    <option style="color:#FFD700;" value="#FFD700">ERICK</option>
    <option style="color:#0071c5;" value="#0071c5">MATHEUS</option>
    <option style="color:#FF4500;" value="#FF4500">JÉSSICA</option>
    </select>
    </div>

<div class="modal-body">
<dl class="dl-horizontal">
    <dt>ID do Evento</dt>
    <dd id="id"></dd>
    <dt>Titulo do Evento</dt>
    <dd id="title"></dd>
    <dt>Vendedor</dt>
    <dd id="color"></dd>
    <dt>Inicio do Evento</dt>
    <dd id="start"></dd>
    <dt>Fim do Evento</dt>
    <dd id="end"></dd>
</dl>
</div>

eventClick: function(event) {
    $('#visualizar #id').text(event.id);
    $('#visualizar #title').text(event.title);
    $('#visualizar #color').text(event.color);
    //$('#visualizar #vend').text(event.vend);
    $('#visualizar #start').text(event.start.format('DD/MM/YYYY HH:mm:ss')); 
    $('#visualizar #end').text(event.end.format('DD/MM/YYYY HH:mm:ss')); 
    $('#visualizar').modal('show');
return false; },

fullcalendar

asked by anonymous 16.06.2018 / 19:36

1 answer

Why do I have to give the full address? img src ... Error System.NullReferenceException when trying to pass Value from one Form to another Winforms C #

score 0 · Answer 1

I do not know if I understood correctly what you want, but here's an example.

$('#calendar').fullCalendar({
  events: [{
      id: '01',
      title: 'event1',
      start: '2018-06-25'
    },
    {
      id: '02',
      title: 'event2',
      start: '2018-06-25',
      end: '2018-06-26'
    },
    {
      id: '03',
      title: 'event3',
      start: '2018-06-25',
    }
  ],
  eventClick: function(event, jsEvent, view) {
    $('#ModalId').val(event.id);
    $('#modalTitle').html(event.title);
    $('#calendarModal').modal();
  },

});
$('#color').change(function(events) {
  var id = $('#ModalId').val();
  var ev = $("#calendar").fullCalendar('clientEvents', id);
  ev[0].backgroundColor = $(this).val();
  $("#calendar").fullCalendar('addEventSource', events);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.js"></script><linkhref="https://cdn.jsdelivr.net/fullcalendar/1.5.4/fullcalendar.css" rel="stylesheet" />


<div id="calendar"></div/>

  <div id="calendarModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
          <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body">
          <input type="hidden" id="ModalId" />
          <div class="row">
            <label for="inputEmail3" class="col-sm-2 control-label">Salesman</label>
            <div class="col-sm-10">
              <select name="color" class="form-control" id="color">
                <option style="color:#FFD700;" value="#FFD700">ERICK</option>
                <option style="color:#0071c5;" value="#0071c5">MATHEUS</option>
                <option style="color:#FF4500;" value="#FF4500">JÉSSICA</option>
              </select>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>