locked
Show event full calendar RRS feed

  • Question

  • User-366177243 posted

    I'm having trouble showing data on fullcalendar due to the date (start , end)

    Model: 

     string sql = "SELECT id, title, start, end, AllDay, Color, TextColor FROM agenda";
            DataTable dt = objDAL.RetDataTable(sql);
    
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                item = new AgendaModel
                {
    
                    Id = dt.Rows[i]["Id"].ToString(),
                    Title = dt.Rows[i]["Title"].ToString(),
                    Start = dt.Rows[i]["Start"].ToString(),
                    End = dt.Rows[i]["End"].ToString(),
                    //AllDay = dt.Rows[i]["Allday"].ToString(), (Bool)
                    Color = dt.Rows[i]["Color"].ToString(),
                    TextColor = dt.Rows[i]["TextColor"].ToString()
    
                };

    View: 

    @{
            foreach(var item in (List<AgendaModel>)ViewBag.ListaEventos)
                   {<text>events.push({
                     'id': @item.Id,
                     'title': '@item.Title',
                     'start': '@item.Start',
                     'end': '@item.End',
                     'allDay': false,
                     'color': '@item.Color',
                     'textColor': '@item.TextColor'
                   });</text>
    
            }
    
        }

    Sunday, August 23, 2020 6:19 PM

All replies

  • User1686398519 posted

    Hi klasss,

    I made a detailed example and gave some suggestions, you can check your code according to the following suggestions.

    1. klasss

      string sql = "SELECT id, title, start, end, AllDay, Color, TextColor FROM agenda";
      DataTable dt = objDAL.RetDataTable(sql);
      • It seems to be the code to query the data. You need to ensure that the data in the database is successfully retrieved.
      • Since you did not give the code how to query, so in the example, I use Entity Framework to query the data, you can modify it according to your actual situation, as long as you can query the data.
    2. If you want to use fullCalendar, you must ensure that the "fullcalendar.min.js" and "moment.min.js" files have been referenced.In addition, you need to pay attention to the following points:
      • You need to quote the jquery file and quote it before the two files mentioned above.
      • The moment.min.js file needs to be quoted before the fullcalendar.min.js file.
      • You can install jQuery.Fullcalendar using NuGet.
    3. In the code you provided, you seem to assign data to ViewBag.ListaEventos, and then get data from ViewBag.ListaEventos on the view.You need to check if ViewBag.ListaEventos has a value.
      • If you want to use ViewBag.ListaEventos, you can refer to the code in the example.However, the lifetime of ViewBag only starts and ends in the current request. If a redirect occurs, the value of ViewBag will be lost.
      • In the example, I also give another method, which uses ajax request operation to get data, you can refer to it.
    4. Note: The example given does not use _Layout.cshtml.

    Model

        public class AgendaModel
        {
            public string Id { set; get; }
            public string Title { set; get; }
            public string Start { set; get; }
            public string End { set; get; }
            public bool AllDay { set; get; }
            public string Color { set; get; }
            public string TextColor { set; get; }
        }

    Controller

        public class FullCalendarController : Controller
        {
            public MVCTestContext db = new MVCTestContext();
            public ActionResult Index()
            {
                //Here is to use Entity Framework to query all the data, 
                //you can modify it according to your own actual situation,
                //as long as you can query the data.
                ViewBag.ListaEventos = db.AgendaModels.ToList();
                return this.View();
            }
            public ActionResult GetCalendarData()
            {
                //Here is to use Entity Framework to query all the data, 
                //you can modify it according to your own actual situation,
                //as long as you can query the data.
                List<AgendaModel> lista = db.AgendaModels.ToList();
                return Json(lista, JsonRequestBehavior.AllowGet);
            }
        }

    View

    @{
        ViewBag.Title = "Index";
        Layout = null;
    }
    <h2>Use ajax request to get data</h2>
    <div class="form-group col-sm-offset-1" style="width:800px;">
        <div id="calendar"></div>
    </div>
    <br />
    <h2>Store data in ViewBag</h2>
    <div class="form-group col-sm-offset-1"  style="width:800px;">
        <div id="calendar2"></div>
    </div>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/fullcalendar.min.js"></script>
    <script>
            $(document).ready(function () {
                //Use ajax request to get data
                $('#calendar').fullCalendar({
                    header:
                    {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    buttonText: {
                        today: 'today',
                        month: 'month',
                        week: 'week',
                        day: 'day'
                    },
                    events: function (start, end, timezone, callback) {
                        $.ajax({
                            url: '@Url.Action("GetCalendarData")',
                            type: "GET",
                            dataType: "JSON",
                            success: function (result) {
                                var events = [];
                                $.each(result, function (i, data) {
                                    events.push(
                                        {
                                            title: data.Title,
                                            start: moment(data.Start, "YYYY-MM-DD"),
                                            end: moment(data.End, "YYYY-MM-DD"),
                                            allDay: data.AllDay,
                                            color: data.Color,
                                            textColor: data.TextColor
                                        });
                                });
                                callback(events);
                            }
                        });
                    }
                });
                //Store data in ViewBag
                $('#calendar2').fullCalendar({
                    header:
                    {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    buttonText: {
                        today: 'today',
                        month: 'month',
                        week: 'week',
                        day: 'day'
                    },
                    events: function (start, end, timezone, callback) {
                        var events = [];
                        $.each(@Html.Raw(Json.Encode(ViewBag.ListaEventos)), function (i, data) {
                            events.push(
                                {
                                    title: data.Title,
                                    start: moment(data.Start, "YYYY-MM-DD"),
                                    end: moment(data.End, "YYYY-MM-DD"),
                                    allDay: data.AllDay,
                                    color: data.Color,
                                    textColor: data.TextColor
                                });
                        });
                        callback(events);
                    }
                });
            });
    </script>

    Here is the result.

    Best Regards,

    YihuiSun

    Monday, August 24, 2020 3:56 AM
  • User1686398519 posted

    Hi klasss,

    Have your problem been solved?If you still meet problems, you can post it here and people here will be happy to solve the problem.

    Best Regards,

    YihuiSun

    Wednesday, August 26, 2020 1:22 AM
  • User-366177243 posted

    Hi YihuiSun , 

    I created a new project to use EntityFramework.

    I started messing with DAL on ASP.Net and realized how it worked. I am still having some difficulties to understand the mechanism well.

    There are several things that have to be installed.

    I think it's related because I never learned how to deal with the entity framework. All steps from start to finish. I appreciate your concern in helping

    Wednesday, August 26, 2020 9:12 AM