Changing the functioning of Fullcalendar

Asked

Viewed 642 times

1

Good evening, I’m changing the operation of the Fullcalendar template https://fullcalendar.io/js/fullcalendar-3.7.0/demos/agenda-views.html, to suit what I need. By clicking on the link, you can see that on the 12th there is a link called more, that by clicking opens the complete list of events. I wanted to expand the area of that link to the entire frame, and to click on the frame, open a modal, so I put a brief description in the event next to the title, and not just the list of titles. Thank you!

javascript jquery twitter-bootstrap fullcalendar

2 answers

0

Reference: https://fullcalendar.io/docs/eventClick 

$("#calendar").fullCalendar({
events: [
    {
        title: "Test event",
        id: "821",
        end: "2018-03-18 14:00:00",
        start: "2018-03-20 06:00:00",
        description: "Event is the best"
    }
],
eventClick:function(calEvent){
    var content = calEvent.title +'<br>' + calEvent.description;
    $('.bs-example-modal-lg .modal-body').html(content);
    $('.bs-example-modal-lg').css({'z-index':'9999999'}).modal('show');
}
});

0

I’m not sure what you wish you were accomplishing, come on!

As stated in the comment above, you may be using eventClick: https://fullcalendar.io/docs/eventClick

The following example shows you clicking on the event and displaying a warning regarding an event content, after which a bootstrap modal is opened:

<!DOCTYPE html>
<html lang='pt-br'>
  <head>
    <meta charset='utf-8' />
    <link href='lib/main.css' rel='stylesheet' />
    <script src='lib/main.js'></script>
    <link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            themeSystem: 'bootstrap',
            headerToolbar: {
                start: 'title', // will normally be on the left. if RTL, will be on the right
                center: '',
                end: 'today prev,next', // will normally be on the right. if RTL, will be on the left
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            nowIndicator: true,

            eventClick: function(info) {
              alert(info.event.extendedProps.description)
              $("#modalExemplo").modal();
              // change the border color just for fun
              //info.el.style.borderColor = 'red';
            },
            
            locale: 'pt-br',
            initialView: 'dayGridMonth',
            showNonCurrentDates: false,
            buttonText: {
                today:    'Hoje',
                month:    'mês',
                week:     'semana',
                day:      'dia',
                list:     'lista'
            },

            events: [
                { // this object will be "parsed" into an Event Object
                id: '123123',
                title: 'The Title123', // a property!
                start: '2020-11-15T15:30:00', // a property!
                end:'2020-11-17',
                description:'12312',
                
                color: 'red',
                url: '',
                extendedProps: {
                  description1: 'BioChemistry'
                },

                },
            ]

        });
        calendar.render();
      });

    </script>
  </head>
  <body>
<div class="container">
    <div id='calendar' class="mt-4 mb-4"></div>
</div>

<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
     
    </div>
  </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
</html>

Browser other questions tagged javascript jquery twitter-bootstrap fullcalendar

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