FullCalendar with Mysql

Question

User-366177243 posted

Hi, 

This is my first experience with ASP.NET . 
I've done several small projects and now I want to do something a little bigger. 

I try use FullCalendar with connect mysql.

I have in View -- index : 

<script>

    //Jquery
    $(function () {
        CriarEventosCalendario();
    });

    function CriarEventosCalendario() {

        var events = [];

        events.push({
            'id': 1,
            'title': 'TESTE1',
            'start': '2020-05-20 00:00:00',
            'end': '2020-05-20 00:00:00',
            'allday': false,
            'color': '#FFFF00',
            'textColor': '#000000'
        });

        events.push({
            'id': 2,
            'title': 'TESTE2',
            'start': '2020-05-24 00:00:00',
            'end': '2020-05-25 00:00:00',
            'allday': false,
            'color': '#FFFF00',
            'textColor': '#000000'
        });

        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            header: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth, dayGridWeek, dayGridDay'
            },
            navlinks: true,
            editable: true,
            eventLimit: true,
            eventClick: function (evenObj) {

            },
            events: events
        });

        calendar.render();
    }

Model -- AgedaModel 

 public class AgendaModel
    {
        [Display(Name = "Id")]
        public string Id { get; set; }

        [Display(Name = "Title")]
        public string Title { get; set; }

        [Display(Name = "Start")]
        public string Start { get; set; }

        [Display(Name = "End")]
        public string End { get; set; }

        [Display(Name = "AllDay")]
        public bool AllDay { get; set; }

        [Display(Name = "Color")]
        public string Color { get; set; }

        [Display(Name = "TextColor")]
        public string TextColor { get; set; }

    }

And Controller -- AgendaController

namespace ProjectoGlobal.Controllers
{
    public class AgendaController : Controller
    {

        public IActionResult Index()
        {
            return View();
        }

I need a little guidance for this little project of mine. I thank anyone who can explain to me

Answer 1

User409696431 posted

"I need a little guidance for this little project of mine. I thank anyone who can explain to me"

What guidance do you need?  What is not working as expected in the code you are trying?  What errors do you get?

Answer 2

User-366177243 posted

To show data in a table I used the following:

This to show in a table: 

            FuncionarioModel item;
            DAL objDAL = new DAL();
            string sql = $"SELECT Id, Nome FROM funcionario where id ='{id}' ORDER BY Nome asc"; 
            DataTable dt = objDAL.RetDataTable(sql);
            
                item = new FuncionarioModel
                {
                    Id = dt.Rows[0]["Id"].ToString(),
                    Nome = dt.Rows[0]["Nome"].ToString()
                 }

              return item;

I tried something similar: (i know it's wrong. but I thought of something like that.)

just a way that I thought

            AgendaModel item;
            DAL objDAL = new DAL();
            string sql = $"SELECT Id, title, start, end, allday, color, textcolo FROM Agenda; 
            events dt = objDAL.RetDataTable(sql);
            
                item = new AgendaModel
                {
                    Id = dt.Rows[0]["Id"].ToString(),
                    Nome = dt.Rows[0]["Nome"].ToString()
                 }

              return item;

Answer 3

User409696431 posted

Start at the beginning.  What are you trying to do?  What is the full code you are trying?  What does it do that you don't expect it to do?

Answer 4

User475983607 posted

There are many fully functional FullCalendar MVC examples on the internet.  I recommend you start with a few examples to see how others have implemented the same.  Below are a few but you can Google for more examples.

https://www.toshalinfotech.com/Blogs/ID/115/How-to-Integrate-Full-calendar-with-MVC-application

https://www.c-sharpcorner.com/article/asp-net-mvc5-full-calendar-jquery-plugin/ 

The main issue I see with your approach is you are using a DataTable.  The DataTable is ASP.NET construct used to bind data to data bound server controls.  The FullCalendar is a JavaScript/jQuery API that runs in the browser  The data format is JSON.   It is up to you to learn the FullCalendar API so you know what data to pass back and forth.

Answer 5

User1686398519 posted

Hi,  klasss

You can refer to the example in this link. You only need to use your own way to connect to the database.

http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html

Best Regards,

YihuiSun