Articles in this section
Category / Section

How to load the data from SQLite offline database into SfCalendar?

2 mins read

SfCalendar allows you to bind the data from local database by using SQLite.

Refer the following link to know how to create SQLite connection,



Custom appointment class defined.

    /// <summary>   
    /// Represents custom data properties.   
    /// </summary>  
    public class AppointmentDB
        public string Subject { get; set; }
        public string StartTime { get; set; }
        public string EndTime { get; set; }
        public string AllDay { get; set; }
        public string Color { get; set; }


Since SQLite doesn’t support for DateTime type, we have used it as string type and convert into DateTime while adding items to local collection from DB. SQLite data table is created which is used to populate the data and then store them as CalendarEventCollection.

   public class ViewModel
        SQLiteConnection database;
        public CalendarEventCollection Meetings { get; set; }
        public ViewModel()
            //Create connection
            database = DependencyService.Get<ISQLite>().GetConnection();
            //Create table
            var currentDate = DateTime.Now.Date;
            database.Query<AppointmentDB>("DELETE From AppointmentDB");
            //Insert data in to table 
            database.Query<AppointmentDB>("INSERT INTO AppointmentDB (Subject,StartTime,EndTime,AllDay,Color)values ('Yoga Therapy','" + currentDate.AddHours(1).ToString() + "', '" + currentDate.AddHours(2).ToString() + "','false','#ff0000')");
            database.Query<AppointmentDB>("INSERT INTO AppointmentDB (Subject,StartTime,EndTime,AllDay,Color)values ('Client Meeting','" + currentDate.ToString() + "', '" + currentDate.AddHours(1).ToString() + "','true','#0000ff')");
            database.Query<AppointmentDB>("INSERT INTO AppointmentDB (Subject,StartTime,EndTime,AllDay,Color)values ('Client Meeting','" + currentDate.AddHours(5).ToString() + "', '" + currentDate.AddHours(7).ToString() + "','false','#ffa500')");
        /// <summary>
        /// Creates meetings and stores in a collection.  
        /// </summary>
        private void AddAppointments()
            var table = (from i in database.Table<AppointmentDB>() select i);
            Meetings = new CalendarEventCollection();
            foreach (var order in table)
                var EventName = order.Subject;
                var From = DateTime.Parse(order.StartTime);
                var To = DateTime.Parse(order.EndTime);
                var AllDay = Convert.ToBoolean(order.AllDay);
                Meetings.Add(new CalendarInlineEvent()
                    Subject = order.Subject,
                    StartTime = DateTime.Parse(order.StartTime),
                    EndTime = DateTime.Parse(order.EndTime),
                    Color = Color.FromHex(order.Color),
                    IsAllDay = Convert.ToBoolean(order.AllDay),


Refer the following code to bind the data from SQLite to SfCalendar by using DataSource Property.

    <syncfusion:SfCalendar x:Name="calendar" ShowInlineEvents="true"
        DataSource = "{Binding Meetings}">



To run this sample in UWP, install, version v1.0.10 (Only this version of SQLite supports UWP platform, later versions don’t support UWP).

View sample in GitHub

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment