How to color Events in Fullcalendar?

Asked

Viewed 343 times

-2

color I can, but I need to color when selecting the seller X, How to color different Events in fullcalendar? based on an option... example: I have 3 sellers, I want each Seller to have its own color when clicking on the day to register an event, this he chooses through a modal. This modal is the Event registration screen, where the seller chooses the Title, the Seller’s name, the initial date and the final date.... when choosing the seller A the color in fullcalendar should be red, when choosing Seller B the color should be blue and when choosing Seller C the color should be green... thanks in advance...

    <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

  • Show your code.

  • HERE THE USER CHOOSES THE SELLER, so far so good, the event goes pro calendar in the specified color <div class="form-group"> <label for="inputEmail3" class="col-Sm-2 control-label">Seller</label> <div class="col-Sm-10"> <select name="color" class="form-control" id="color"> <option value="">Select</option> <option style="color:#0071c5;" value="#0071c5">ERICK</option> <option style="color:#FF4500;" value="#FF4500">JÉSSICA</option> <option style="color:#8B4513;" value="#8B4513">MATHEUS</option> </select>

  • HERE IS THE EVENT, which pulls in the BD: Events: [ <? php while($row_events = mysqli_fetch_array($resultado_events)){ ? > { id: '<? php echo $row_events['id']; ? >', title: '<? php echo $row_events['title']; >', start: '<? php echo $row_events['start']; ? >', end: '<? php echo $row_events['end']; ? >', color: '<? php echo $row_events['color']; ? >', },<? php } ? > ]

  • THIS IS WHERE THE EVENT IS SHOWN in a modal, and here is the problem, it does not show the Seller, if I put it to show the Seller, it stops coloring.:

  • $('#visualize #id'). text(Event.id); $('#visualize #id'). val(Event.id); $('#visualize #title'). val(Event.title); $('#display #start'). val(Event.start.format('DD/MM/YYYY HH:mm:ss'); $('#visualize $('#visualize #end'). val(Event.end.format('DD/MM/YYYY HH:mm:ss'); $('#visualize #color'). val(Event.color); //$('#visualize #color'). text(Event.color); $('#visualize'). modal('show');

  • AND HERE IS THE MODAL WHERE THE EVENT SHOWS: <div class="view"> <dl class="dl-horizontal"> <dt>ID</dt> <dd id="id"></dd> <dt>Customer</dt> <dd id="title"></dd> <dt>Seller</dt> <dd id="color"></dd> <dt>Expected start</dt> <dd id="start"></dd> <dt>Intended end</dt> <dd id="end"></dd> </dl> <button class="btn btn-canc-vis btn-Warning">Edit</button> </div>

  • @Netinhosantos there are my codes.

  • 1

    Enter your code into the question. It’s easier to read

  • @Netinhosantos put in question the code.

  • @André Baill , can help me,?

  • @Felipe Miranda de Lima

  • I don’t know if it’s exactly what you want, but here’s an example: http://jsbin.com/cuninamula/edit?html,output . Only I could not put here in Stack, it did not load the lib of Fullcalendar :( If it is, I can put the code in the answer.

Show 7 more comments

1 answer

0

I’m not sure I understand what you want, but follow 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>

<script src="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>
<link href="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>

Browser other questions tagged fullcalendar

You are not signed in. Login or sign up in order to post.