Add event to FullCalendar dynamically

Question

Add event to FullCalendar dynamically

Navigation

#1 by (1 votes)
#2 by (1 votes)

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 in the weekly calendar (for me to know the day / duration of the course).

Well, I'm trying to use FullCalendar. Here is 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 events manually inside the header. Would you like to know how I can do this dynamically? (Or else, advice from another more appropriate tool).

javascript jquery fullcalendar

asked by anonymous 01.04.2016 / 00:41

2 answers

How to choose which serialize field - Jackson How to read XML in live standard? [closed]

score 1 · Answer 1

Use the renderEvent method:

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

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

Natively, FullCalendar only interprets dates in the formats allowed by moment.js. That is:

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

You have to do the conversion, a convenient way would be:

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

score 1 · Answer 2

Just turn into JSON Inside Json you have to leave the same names "Start", "End", "Title", "Url" and so on, done this just call your system as follows:

$(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
    });
  });
});