This is a migrated thread and some comments may be shown as answers.

Creating Custom Timeline Views

5 Answers 172 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 31 Jan 2018, 07:10 PM
I am in need of quarterly and yearly views for my current Scheduler project.  Has anyone created a quarterly timeline view for the PHP UI?  Can you provide an example?

5 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 02 Feb 2018, 10:15 AM
Hello James,

As the Telerik UI for PHP simply provides server wrappers of the Kendo UI widgets, the custom views for the Scheduler should be implemented in JavaScript. Here you could find a how-to article on how to extend an existing view in order to create a custom one.

In case you need further assistance on implementing the custom view, I would recommend you our Professional services team. Our colleagues are focused on providing tailor made solutions as per customer requirements. Let me know if you are interested in cooperating with them and I will arrange someone from the team to contact you directly.

Regards,
Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
James
Top achievements
Rank 1
answered on 05 Feb 2018, 09:18 PM

I used the code as shown and added the custom view in Scheduler using addView and it shows the variable name and not the title name.  Any idea on why the title is not getting passed?

Here is the added code in my php file

->addView(array('type' => 'week', 'startTime' => new DateTime('7:00')),
array('type' => 'timelineWeek', 'eventHeight' => 50, 'majorTick' => 60),
array('type' => 'timelineWorkWeek', 'eventHeight' => 50, 'majorTick' => 60),
array('type' => 'timelineMonth', 'eventHeight' => 50, 'majorTick' => 1440, 'selected' => true),

array('type' => 'MyCustomTimelistView', 'eventHeight' => 50),  'agenda')

----------------------------------------------------------------------

Here is the code in my javascript section

-------------------------------------------------------------------------

var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
          options: {
            name: "MyCustomTimelistView",
            title: "Timeline Quarter",
            selectedDateFormat: "{0:D} - {1:D}",
            selectedShortDateFormat: "{0:d} - {1:d}",
            majorTick: 1440,
            numberOfDays: 90
          },
          name: "MyCustomTimelistView",
          calculateDateRange: function() {
            //create the required number of days

            var start = this.options.date,
                //  start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                idx, length,
                dates = [];

            for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
              dates.push(start);
              start = kendo.date.nextDay(start);
            }
            this._render(dates);
          },
          previousDate: function() {
            var date = new Date(this.startDate());

            date.setDate(date.getDate() - this.options.numberOfDays);

            return date
          }
        });

0
Veselin Tsvetanov
Telerik team
answered on 07 Feb 2018, 09:54 AM
Hello James,

To properly display the title of the custom view, you will need to use its title configuration method:
array('type' => 'MyCustomTimelistView', 'eventHeight' => 50, 'title' => 'Timeline Quarter'),

Regards,
Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
James
Top achievements
Rank 1
answered on 07 Feb 2018, 04:52 PM

Thanks Veselin,  I now have the custom view working.  One last question.  In the Timeline Month view, I can hide the row that shows the time by adding the following style in my header

<style>
.k-scheduler-timelineMonthview > tbody > tr:nth-child(1) .k-scheduler-table tr:nth-child(2) {
display: none;
}
</style>

 

Since my custom view is based on the Timeline Month , why does it work for hiding the row in the Timeline Month view but not in the custom view?

0
Veselin Tsvetanov
Telerik team
answered on 09 Feb 2018, 09:24 AM
Hi James,

In order to properly adjust the style to the discussed scenario, you will need to use the name of the custom view as part of the class selector:
.k-scheduler-MyCustomTimelistViewview > tbody > tr:nth-child(1) .k-scheduler-table tr:nth-child(2) {
    display: none;
}

Regards,
Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
James
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
James
Top achievements
Rank 1
Share this question
or