Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

FullCalendar and DateTime Variables in Entity Framework

$
0
0

The current Eagles site (www.rapidcityeagles3555.com) has a calendar of events connected to a database. I am trying to recreate that calendar using a free widget called FullCalendar. I followed this tutorial to connect the calendar to the database. Unfortunately, when I run the project, FullCalendar does not load. I've read that sometimes the page calls jQuery twice when the project is loaded.

The class in the tutorial I mentioned earlier uses all strings as their property. If it were me, I'd use DateTime for the Date, StartTime, and EndTime properties in my class. Will that interfere with FullCalendar's event gathering method? I'd like to use DateTime because I modified the Create and Edit pages of the site to use HTML5 Date and Time fields to ensure that the data is properly formatted. I've tried changing the properties to DateTime, but I've run into a few issues. 1) The EndTime column can no longer be null. 2) How do you convert to string and format that string in Razor files?

Here is my CalendarEvent class and the functions in the HomeController that relate to FullCalendar:

//HomeController functions

public ActionResult GetEvents(double start, double end)
		{
			var fromDate = ConvertFromUnixTimestamp(start);
			var toDate = ConvertFromUnixTimestamp(end);

			//Get the events
			//You may get from the repository also
			var eventList = GetEvents();

			var rows = eventList.ToArray();
			return Json(rows);
		}

		private List<CalendarEvent> GetEvents()
		{
			List<CalendarEvent> eventList = new List<CalendarEvent>();

			CalendarEvent newEvent = new CalendarEvent
			{
				Id = "1",
				Name = "Event 1",
				StartTime = DateTime.Now.AddDays(1),
				EndTime = DateTime.Now.AddDays(1),
				AllDay = false
			};


			eventList.Add(newEvent);

			newEvent = new CalendarEvent
			{
				Id = "1",
				Name = "Event 3",
				StartTime = DateTime.Now.AddDays(2),
				EndTime = DateTime.Now.AddDays(3),
				AllDay = false
			};

			eventList.Add(newEvent);

			return eventList;
		}

		private static DateTime ConvertFromUnixTimestamp(double timestamp)
		{
			var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
			return origin.AddSeconds(timestamp);
		}

//CalendarEvent class

public class CalendarEvent
    {
		public string Id { get; set; }
		public string Name { get; set; }
		[Display(Name = "Date")]
		[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
		public DateTime EventDate { get; set; }
		[Display(Name = "Start Time")]
		[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
		public DateTime? StartTime { get; set; }
		[Display(Name = "End Time")]
		[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
		public DateTime? EndTime { get; set; }
		public string Notes { get; set; }
		[Display(Name = "All Day")]
		public bool AllDay { get; set; }
	}

Here's the Calendar page:

<h1>@ViewData["Title"].</h1><h2>@ViewData["Message"]</h2><div id="calendar"></div>

@section scripts{
	<script type="text/javascript">$(document).ready(function () {$('#calendar').fullCalendar({
				//theme: true,

				//defaultView: 'agendaDay',
				//editable: false,
				//events: "/home/getEvents/"
			});

		});
	}


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>