Might not be the approach that you are asking about but you could make use of something like the Scheduler from the Kendo UI tools: https://demos.telerik.com/kendo-ui/scheduler/index 

I've also used blocks to feed data to the JavaScript calendar from https://fullcalendar.io/ as seen here https://dgs.virginia.gov/onthesquareVA/Calendar/onthesquarevacalendar/ 

public class CalendarItemBlock : BlockData
    {



[Display(
Name = "Title",
Description = "Calendar Item Title",
GroupName = SystemTabNames.Content,
Order = 10)]
public virtual string Title { get; set; }



[Display(
Name = "Description",
Description = "Calendar Item Description",
GroupName = SystemTabNames.Content,
Order = 20)]
public virtual XhtmlString Description { get; set; }



[Display(
Name = "Start Date",
Description = "Calendar Item Start Date",
GroupName = SystemTabNames.Content,
Order = 30)]
public virtual DateTime Date { get; set; }



[Display(
Name = "End Date",
Description = "Calendar Item End Date If Necessary",
GroupName = SystemTabNames.Content,
Order = 35)]
public virtual DateTime EndDate { get; set; }



[Display(
Name = "Is All Day",
Description = "Event Is All Day",
GroupName = SystemTabNames.Content,
Order = 40)]
[DefaultValue(true)]
public virtual Boolean IsAllDay { get; set; }



[Display(
Name = "Url",
Description = "Calendar Item Url",
GroupName = SystemTabNames.Content,
Order = 50)]
public virtual Url Url { get; set; }



}