Tukukkk

So, I searched this everywhere and couldn't implement a working method.

I'm building a C#, ASP.NET system and in this project it's being used Full Calendar v3.9, I also have a Database on SQLServer where the events are save. I'm triyng to load these events in the Calendar, but I couldn't manage to do it.

My Class (ModeloTarefas):

    private int id;

    private string title, start , end;





    public int Id

    {

        get { return id; }

        set { id = value; }



    }



    public string Title

    {

        get{ return title; }

        set{ this.title = value; }

    }



    public string Start

    {

        get { return start; }

        set { start = value; }

    }



    public string End

    {

        get { return end; }

        set { end = value; }

    }



    //CONSTRUCTOR  

    public ModeloTarefas(int id, String title, String start, String end)

    {

        this.id = id;

        this.title = title;

        this.start = start;

        this.end = end;

    }

WebServer Method:

[WebMethod]



    public String ListarTarefas()

    {



        //Criar um array para guardar as informações que virão do BD

        List<ModeloTarefas> lista = new List<ModeloTarefas>();



        string tarefasJsonString = "";



        try

        {

            con.Open();



            //Comando para selecionar os itens da tabela peixes

            SqlCommand listar = new SqlCommand("SELECT * FROM Tarefas", con);

            SqlDataReader leitor = listar.ExecuteReader();



            //Realiza a captura dos dados caso haja algo na tabela

            if (leitor.HasRows)

            {

                var indexOfId = leitor.GetOrdinal("ID");

                var indexOfTitle = leitor.GetOrdinal("Title");

                var indexOfStart = leitor.GetOrdinal("start");

                var indexOfEnd = leitor.GetOrdinal("end");





                while (leitor.Read())

                {



                    var id = (int)leitor.GetValue(indexOfId);

                    var title = leitor.GetValue(indexOfTitle).ToString();

                    var start = leitor.GetValue(indexOfStart);

                    var end = leitor.GetValue(indexOfEnd);



                    //Convert Implicity typed var to Date Time

                    DateTime RealData_Inicio = Convert.ToDateTime(start);

                    DateTime RealData_Fim = Convert.ToDateTime(end);



                    //Convert Date Time to ISO

                    String ReadyData_Inicio = RealData_Inicio.ToString("s");

                    String ReadyData_Fim = RealData_Fim.ToString("s");



                    ModeloTarefas tarefa = new ModeloTarefas(id, title, ReadyData_Inicio, ReadyData_Fim);



                    lista.Add(tarefa);

                }



                tarefasJsonString = (new JavaScriptSerializer()).Serialize(lista);



            }

        }

        catch (Exception e)

        {

            lista = null;

        }



        if (con.State == ConnectionState.Open)

            con.Close();



        return tarefasJsonString;

    }

JavaScript to load the Calendar:

    <script>



    //Get current Date

    var today = new Date();

    var dd = today.getDate();

    var mm = today.getMonth() + 1; //January is 0!

    var yyyy = today.getFullYear();



    if (dd < 10) {

        dd = '0' + dd

    }



    if (mm < 10) {

        mm = '0' + mm

    }



    today = yyyy + '/' + mm + '/' + dd;



    //Load Calendar

    $(document).ready(function () {



        $('#calendar').fullCalendar({

            header: {

                left: 'prev,next today',

                center: 'title',

                right: 'listDay,listWeek,month'

            },



            // customize the button names,

            // otherwise they'd all just say "list"

            views: {

                listDay: { buttonText: 'Dia' },

                listWeek: { buttonText: 'Semana' }

            },





            defaultView: 'month',

            defaultDate: today,

            locale: 'pt-br',

            navLinks: true, // can click day/week names to navigate views

            editable: true,

            selectable: true,

            selectHelper: true,

            eventLimit: true, // allow "more" link when too many events



            //Create events when clicking

            select: function (start, end) {

                var title = prompt('Event Title:');

                var eventData;

                if (title) {

                    eventData = {

                        title: title,

                        start: start,

                        end: end

                    };

                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

                }

                $('#calendar').fullCalendar('unselect');

            },





            // Traz os eventos do Banco de Dados

            eventSources: [



           {

               url: '../WebService1.asmx/ListarTarefas',

               type: 'POST',

               error: function () {

                   alert('Ocorreu um erro ao retornar as Tarefas. Por favor, entre em contato conosco.');

                   console.log(MediaError)

               },

               color: 'yellow',   // a non-ajax option

               textColor: 'black' // a non-ajax option

           }



           ]



        });



    });



    </script>

I'm not a professional in Javascript (actually this is my first big project with JS). I tried some solutions I've found here on StackOverflow but couldn't make it work.

This is the JSON that the WEB Method return:

<string xmlns="http://tempuri.org/">

[{"Id":3,"Title":"Teste Tarefa 1","Start":"2018-11-13T00:00:00","End":"2018-11-13T00:00:00"},{"Id":4,"Title":"Teste Tarefa 2","Start":"2018-11-13T00:00:00","End":"2018-11-13T00:00:00"}]

</string>