maintain custom data model via Scheduler...or Calendar?

1 Answer 40 Views
Calendar Editor Scheduler
chesk345
Top achievements
Rank 1
Iron
Iron
Iron
chesk345 asked on 09 Jul 2021, 06:43 PM | edited on 10 Jul 2021, 11:16 AM

Hello,

I am trying to decide if I can use either the Calendar or Scheduler control (or even leverage both) for the following problem.  

We have a data model that represents some forecasted daily values.  It is keyed on the date, so there is one unique occurrence/tuple of this class per day.   It could perhaps be implemented as a Dictionary<k,v>, where the key is the date or date-string. 

The users of this UI will want to be able to:

1.  See a single- or multi-month "calendar" of the forecast values in the main view of the control (perhaps like customized appointments in the Scheduler?)

2.  Select one or multiple days (like you can do in the Calendar control, not really in the Scheduler?) and then be able to enter or edit the forecast values for the selected set of days.

3.  Put the entire "calendar" (whatever month(s) are visible at the moment) into edit mode where the date cells use a template to edit the model.

So, the Telerik Calendar has the ability to select by date(s) - rather than appointments.  The Scheduler naturally comes with a UI that is closer to what we need to display a complex object in the day's cell.  On the other hand, the Scheduler is build around the concept of appointments and tasks, which is not really how our users will be thinking about the data. 

I'm playing around with the Calendar right now and able to get some data into the template, but it looks like  garbage right now because the space is obviously constricted.   I have a long way to go, so I'm hoping to find some samples or ideas at least.

<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                  ValueChanged="@MultipleSelectionChangeHandler"
                         @ref="@multipleSelectionCalendar">
       <MonthCellTemplate>
          <div style="border-color:black; border-width:2px">
              @context.Day
              @{
                 string date = context.ToString("yyyyMMdd");
                  if (forecasts.ContainsKey(date))
                    {
                        <div>Forecast : forecasts[date].Forecast </div>
                    }

               }

            </div>
        </MonthCellTemplate>
 </TelerikCalendar>
Thanks a lot!!

1 Answer, 1 is accepted

Sort by
1
Accepted
Marin Bratanov
Telerik team
answered on 11 Jul 2021, 10:40 AM

Hi,

From what I can get from the goals, I think that the calendar with the day template is the way to go - it will let you put custom information in there, you can add a button or other element (perhaps the very custom info element) that the user can click to edit, and perhaps you could pop a window open to provide additional editing capabilities. That also lets you use the built-in date selection too.

Finally, you can add some CSS to override the default calendar size to increase it. Here is an example of that (and the basic concept I described above):

<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" Class="large-cells">
    <MonthCellTemplate>
        <div style="border-color:black; border-width:2px">
            @context.Day
            <span @onclick:stopPropagation="true">
                @* prevent click from going to the cell to affect selection *@
            <TelerikButton Icon="edit" Class="k-flat" OnClick="@( _ => ShowEditingWindow(context) )"></TelerikButton>
        </span>
    </div>
</MonthCellTemplate>
</TelerikCalendar>

<TelerikWindow @bind-Visible="@editorVisible">
    <WindowTitle>Edit</WindowTitle>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        Add editors here for the desired model, now we will simply render the chosen date: @editedModelMimic
    </WindowContent>
</TelerikWindow>

@code{
    bool editorVisible { get; set; }
    DateTime editedModelMimic { get; set; }
    void ShowEditingWindow(DateTime date)
    {
        editedModelMimic = date; // get the whole model or otherwise prepare editing

        editorVisible = true;
    }
}

<style>
    .large-cells.k-calendar,
    .large-cells.k-calendar .k-calendar-view {
        width: 800px; /*match this to the number of calendar views and cell sizes you want*/
        height: 550px;
    }
    .large-cells.k-calendar .k-month td,
    .large-cells.k-calendar .k-month .k-calendar-td,
    .large-cells.k-calendar .k-calendar-monthview td,
    .large-cells.k-calendar .k-calendar-monthview .k-calendar-td {
        width: 100px;
        height: 100px;
    }

    .large-cells .k-calendar-content .k-link {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

chesk345
Top achievements
Rank 1
Iron
Iron
Iron
commented on 13 Jul 2021, 04:02 PM

Thank you, Marin...this provides a good start! I am working with it now, and I'm hopeful I can get it to do all we need. One thing; I found that I needed to upgrade the project from netstandard2.1 to net5 for it to Publish successfully to the file system. I'm just curious if that makes sense with the current Telerik build (2.25.0)..?
Marin Bratanov
Telerik team
commented on 13 Jul 2021, 04:43 PM

It should not be required if this is in a razor class library. If this is a WebAssembly project - it will be required, MS dropped support for .NET Core 3.2.1 which made WASM apps a netstandard2.1 app, it is now a .net5.0 app. You can see more about this here https://docs.telerik.com/blazor-ui/upgrade/framework-versions
chesk345
Top achievements
Rank 1
Iron
Iron
Iron
commented on 13 Jul 2021, 04:52 PM

Thank you again, Marin...
Tags
Calendar Editor Scheduler
Asked by
chesk345
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or