1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfCalendar

SfCalendar

Hi,
I am customizing sfcalendar to my project.
i) How can strike through and slant stripes of blackouts be disabled? I want to use padlock to indicate that a day is blacked out.
ii) How can only working days of the week be displayed as (Mon, Tue, Wed, Thu, Fri) on the calendar? The weekend, Saturdays and Sunday should be excluded.
iii) I want to also display a working days of the week vertically, for example
Week 10
Monday 10th Feb
Tuesday 11th Feb
Wedneday 12th Feb
Thursday 13th Feb
Friday 14th Feb

2 Replies
HS Harsh Shah March 25, 2020 05:35 AM UTC

Hii,
You can display working days like this...

INDEX.TS

import { Schedule, Week, WorkWeek, Month, TimelineViews } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';

Schedule.Inject(Week, WorkWeek, Month, TimelineViews);
let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    selectedDate: new Date(2018, 1, 15),
    currentView: 'WorkWeek',
    views: ['Week', 'WorkWeek', 'Month', 'TimelineWeek', 'TimelineWorkWeek'],
    workDays: [1, 3, 5],
    eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');
INDEX.HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Working days</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link rel='nofollow' href="index.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" /> 
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-schedule/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

</head>
<body>
    <div id='loader'>LOADING....</div>
        <div id='container'>
                <div id="Schedule"></div>
        </div>
</body>
</html>

You can restrict/allocate certain month cells as blackout days using  MonthBlockOutDays of schedule.

schedule.MonthBlockOutDates.Add(new DateTime(2020, 1, 3));
            schedule.MonthBlockOutDates.Add(new DateTime(2020, 1, 19));
            schedule.MonthBlockOutDates.Add(new DateTime(2020, 1, 21));
            schedule.MonthBlockOutDates.Add(new DateTime(2020, 1, 22));
            schedule.MonthBlockOutDates.Add(new DateTime(2020, 1, 24));

MS Muniappan Subramanian Syncfusion Team March 25, 2020 09:33 AM UTC

Hi Sunday, 
 
Thank you for contacting Syncfusion support.  
 
Query 1: Display only week days in Calendar. 
Based on the shared information we have checked your query.  As per the current implementation we don’t have support to show the week days only in calendar. You can disable the touch interaction of week end dates by using the BlackOutDates of SfCalendar. You can customize the month cell of the calendar by using CellTemplate property of MonthViewSettings. Please find the link from below, 
 
  
Query 2: Selection Background on calendar. 
We have checked your query and you can customize the selected date background color and today date background by using DateSelectionColor and TodaySelectionBackgroundColor from the MonthViewSettings class.  Please find the more details about month view customization from below link, 
 
  
Query 3: Display dates in vertical form. 
As per the current implementation, we don’t have support to show the dates in vertical form in SfCalendar. 
 
Query 4: Inline events does not display. 
We have checked your query and it is working fine from our side. We have prepared a simple sample for the same, please find the sample by the following link.  
 
  
We hope that this helps you, kindly revert us if you have any concern.  
 
Regards, 
Muniappan S.

Loader.
Up arrow icon