Is it possible to customize the working days after the calendar is grouped, showing only the day and week without showing the time range?

[aquan]

HI  

     I'd like to ask if this control can display the date and day of the week for a specified date range without displaying the time. For example, I can customize the date range to a month or half a month and display it within that range.

As shown in the image below, without the time and the navigation bar above, the default view is weekdays, displaying the customized date range.

Example:https://ej2.syncfusion.com/angular/demos/#/tailwind3/schedule/inline-editing

[Vijay Ravi]

Hi aquan,

Greetings from Syncfusion Support.
 

We have reviewed your request to display the date and day of the week for a specific date range without showing the time. To customize the date range in the toolbar, we recommend using the scheduler's dateRange template. Additionally, to customize the rows in timeline views and hide the time, we suggest using the headerRows property. Please refer to the provided code snippets and the shared sample for your reference.

[app.component.html]

<ejs-schedule #scheduleObj width='100%' height='650px' [allowInline]="allowInline" [eventSettings]="eventSettings"

      [selectedDate]="selectedDate" [workDays]="workDays" [group]="groupSettings">

      <e-views>

        <e-view option="TimelineWeek"></e-view>

        <e-view option="TimelineMonth"></e-view>

      </e-views>

      <e-resources>

        <e-resource field='TaskId' title='Category' name='Categories' [allowMultiple]='allowMultiple'

          [dataSource]='categoriesData' textField='text' idField='id' groupIDField='groupId' colorField='color'>

        </e-resource>

      </e-resources>

      <ng-template #dateRangeTemplate let-data>

        <div class="date-text">{{getDateRange(data.startDate)}}-{{getDateRange(data.endDate)}}</div>

      </ng-template>

      <e-header-rows>

        <e-header-row option='Date'></e-header-row>

    </e-header-rows>

    </ejs-schedule>

[app.component.ts]
 

public instance: Internationalization = new Internationalization();

public getDateRange(value: Date): string {

        return this.instance.formatDate(value, { skeleton: 'Ed' });

}

Sample link: Z9cr8p2g (duplicated) - StackBlitz

DateRange customization UG: Header bar in Angular Schedule component | Syncfusion
Header Rows UG: Header rows in Angular Schedule component | Syncfusion
Header Rows with Template UG: Header rows in Angular Schedule component | Syncfusion

Don't hesitate to get in touch if you require further help or more information.
 

Regards,

Vijay

[aquan]

HI   Vijay，

       Sorry, based on the above, there is a very important point that is missing, which is the need to realize the dragging of content。

[Viswajith Nagarajan]

Hi aquan,

We have reviewed and validated your queries, provided solutions for each, and created a sample, which we have linked below for your reference.

Query 1: Remove Time Slots

To hide the time slots, you can disable the timescale by setting:
 

public timeScale: TimeScaleModel = { enable: false };

timescale UG link: https://ej2.syncfusion.com/angular/documentation/schedule/timescale#hide-the-timescale

Query 2: Remove Navigation Bar

To hide the navigation header bar, use the showHeaderBar property:

public showHeaderBar: boolean = false;  

showHeaderBar UG Link: https://ej2.syncfusion.com/angular/documentation/schedule/header-bar#show-or-hide-header-bar

Query 3: Default View as Weekdays
 

To display only weekdays:

• Set showWeekend to false to hide weekends.

public showWeekend: boolean = false;

• Use workDays property to define specific working days.

public workDays: number[] = [1, 2, 3, 4, 5];

API References:

ShowWeekEnd API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#showweekend

WorkDay API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#workdays

Query 4: Customized Date Range

Currently, displaying a fully customized date range is not supported. However, you can use the interval property in Views to adjust the range partially.

[app.component.html]

<e-views>

        <e-view displayName='3 Days' option='Day' [interval]="dayInterval"></e-view>

        <e-view displayName='2 Weeks' option='Week' [isSelected]="isSelected" [interval]="weekInterval"></e-view>

  </e-views>

[app.component.ts]

   public dayInterval: number = 3;

   public weekInterval: number = 2;

View intervals: Views in Angular Schedule component | Syncfusion

Query 5: Dragging of content (last query)

Based on your query about enabling content dragging, we understand that drag-and-drop and resizing are not working as expected. To clarify, are you referring to event drag-and-drop and resize functionality? If so, you need to inject the DragAndDropService and ResizeService modules in your sample. If not, could you please provide the exact details of your requirement?

Module UG link: https://ej2.syncfusion.com/angular/documentation/schedule/module-injection

Full implementation Sample link: https://stackblitz.com/edit/angular-avapixvy-aes5ywsb?file=src%2Fapp.component.html,src%2Fapp.component.ts

Don't hesitate to get in touch if you require further help or more information.

Regards,

Viswajith Nagarajan

[aquan]

HI   Viswajith ，

     The question you answered above has solved my needs, but I have another problem. When there is no data in the group, I want to display "No data", but need to keep the header. Similar to the figure below.

[Viswajith Nagarajan]

Hi aquan,

We’re delighted to hear that the previous suggestions resolved your issue.

Query: When there is no data in the group, I want to display “No data”, but need to keep the header.

We’ve reviewed and validated your query. When there is no data in a group, the Scheduler renders according to its default behavior, which does not include displaying a custom “No data” message along with the date header. Currently, it is not possible to render a “No data” placeholder while keeping the date header using the built-in options.

Please don’t hesitate to get in touch if you need further assistance.

 

Regards,

Viswajith Nagarajan