Show entries from database in fullCalendar

Question

I have made a WebForms page, where each employee is able to enter, when they are going on vacation, which then submits an entry to an MS SQL database:

Name         | StartDate | EndDate
varchar(250) | datetime  | datetime

But now I'm completely stuck as how to get this correctly formatted and provided to events, so I'm able to show it on a calendar on another page..

I have no problems with hardcoded events like so:

<body>
<form id="form1" runat="server">
    <div>
        <div id='calendar'></div>
    </div>
</form>

<script>
    $('#calendar').fullCalendar({
        events: [
            {
                title: 'Curt',
                start: '2017-06-16'
            },
            {
                title: 'George',
                start: '2017-06-05',
                end: '2017-06-08'
            },
            {
                title: 'Susan',
                start: '2017-06-03',
                end: '2017-06-09'
            }
        ],
        eventColor: 'royalblue'
    });
</script>

I'm not too familiar with either JSON-feeds or .ashx-handlers, but I hope I'm capable of doing this with a push in the right direction!

Thanks!

Right now I'm guessing it's something along these lines:

public string GetConnectionString()
    {
        return System.Configuration.ConfigurationManager.ConnectionStrings["calendarConnectionString"].ConnectionString;
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    private void GetHolidaysFromDatabase(object sender, EventArgs e)
    {
        SqlConnection conn = new SqlConnection(GetConnectionString());
        string sql = "SELECT * FROM EmployeeHoliday";

        try
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand(sql, conn);
            //  ???

        }
        catch (System.Data.SqlClient.SqlException ex)
        {
            string msg = "Error: ";
            msg += ex.Message;
            throw new Exception(msg);
        }
        finally
        {
            conn.Close();
        }
    }

score 1 · Answer 1 · answered Jun 15 '17 at 14:26

 //  ???

At that point in your code, populate a List<YourCustomEventClass> .

Then, in your webforms code, you need to serialise that list into a JS array, using something like:

<script>
    $('#calendar').fullCalendar({
        events: <%= DataAsJson %>,
        eventColor: 'royalblue'
    });
</script>

In your C# code behind:

    public string DataAsJson
    {
        get
        {
            var serializeObject = new JavaScriptSerializer() { MaxJsonLength = int.MaxValue }.Serialize(YourListHere);
            return serializeObject;
        }
    }

Also, on an unrelated note - use https://stackoverflow.com/a/278924/34092 rather than your finally block.

Thanks for this buddy - I'm trying to get my head around how to link this webapp to my dB and this helps (sort of)! — Umar.H, Feb 02 '19 at 23:02

Show entries from database in fullCalendar

1 Answers1