Перенос событий из базы данных в полный календарь

Итак, я искал это везде и не мог реализовать рабочий метод.

Я создаю C#, систему ASP.NET, и в этом проекте она использует Full Calendar v3.9, у меня также есть база данных на SQLServer, где сохраняются события. Я загружаю эти события в Календарь, но мне не удалось это сделать.

Мой класс (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;
    }

Метод веб-сервера:

[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 для загрузки календаря:

    <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>

Я не профессионал в Javascript (на самом деле это мой первый большой проект с JS). Я попробовал некоторые решения, которые я нашел здесь, на Stackru, но не смог заставить его работать.

Это JSON, который возвращает веб-метод:

<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>

0 ответов

Другие вопросы по тегам