Add event in Fullcalendar dynamically

Asked

Viewed 2,476 times

2

I have a list of teachers, within each teacher, I have a sublist of subjects. I need to create something like a "weekly calendar" for every time I select a teacher, I show his subjects on the weekly calendar (so I know the day / duration of the course).

Well, I’m trying to use Fullcalendar. Here’s my code:

<!DOCTYPE html>
<html>  
<head>      
    <meta charset="UTF-8">
    <title>Calendario</title>       
    <script src='calendario/lib/moment.min.js'></script>
    <script src='calendario/fullcalendar.js'></script>
    <script src='calendario/lang/pt-br.js'></script>
    <link rel='stylesheet' href='calendario/fullcalendar.css'/>

    <script type="text/javascript">
    $(document).ready(function(){
        var date = new Date();
        var dia = date.getDate();
        var m = date.getMonth()+1; //January is 0
        var mes = m < 10 ? '0' + m : '' + m;
        var ano = date.getFullYear();
        var data = ano + '-' + mes + '-' + dia;


        //Page is now ready, initialize calenda.
        $('#calendario').fullCalendar({

            header: {
                center: 'title',
                left: '',
                right: ''
            },          

            height: 800,
            defaultView: 'agendaWeek',  

            views: {
                week: {
                    columnFormat: 'dddd'
                }
            },

            firstDay: 1,
            weekends: false,

            events: [
                {
                    title: 'Event1',
                    start: ano + '-' + mes + '-' + dia,
                    end: ano + '-' + mes + '-' + dia + 'T04:00'
                }
            ],

        })
    });
</script>
</head>
<body>  
    <div class="teste">
        <div id="calendario"></div>
    </div>
</body>
</html>

As you can see, I’m adding the events manually inside the header. I wonder how I can do this dynamically ? (Or, advice from another more appropriate tool).

javascript jquery fullcalendar

2 answers

1

Use the method renderEvent:

$('#calendario').fullCalendar(
    'renderEvent',
    {
      title: 'Novo evento',
      start: '2016-03-31',
    }
);


How to use dates in dd/mm/yyyy format?

Natively, Fullcalendar only interprets dates in the formats allowed by Moment.js. IE:

  • string in format ISO8601 (basically 2016-04-01 or 2016-04-01T07:31:43Z)
  • Unix offsets (milliseconds since the Unix era)
  • Objects Date natives

Have to do the conversion, a convenient way would be:

moment('19/08/1949', 'DD/MM/YYYY').format('YYYY-MM-DD')

  • I have an event that I toggle in the menu, to open and show the submenu (accordion effect). Adding this code snippet there is to work well ?

  • 2

    Yes, you can put it anywhere. See how it works http://codepen.io/anon/pen/EKwPXo

  • Excellent ! Last thing, you can make the plugin accept date in dd/mm/yyyy format ?

  • 1

    fi can do everything, since the project is opensource, but natively it only accepts some specific formats even. edited my reply showing how to do the conversion using Moment.

1

Just turn it into JSON Within Json you have to leave the same names "Start", "End", "Title", "Url" and so on, so this is just calling on your system in the following way:

$(document).ready(function() {
  var link = $(location).attr('href');
  var url = link.split('/'); // Aqui estou dando split pra poder pegar a url, pois esse sistema está em 2 dominios

  $.getJSON("http://"+url[2]+"/tarefas/json", function( data ) {
    $('#calendar').fullCalendar({
        weekends: false, // Desabilitando os finais de semana
        events: data // Aqui estou pegando o resultado do meu JSON
    });
  });
});

Browser other questions tagged javascript jquery fullcalendar

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