This is a migrated thread and some comments may be shown as answers.
Creating Custom Timeline Views
6 Answers 36 Views
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?

6 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.
0
ricky
Top achievements
Rank 1
Iron
answered on 03 May 2021, 05:07 AM
Hi James, I think the best option here would be to use a chart to depict each timeline, it could save you more coding as well as get the task done easily. If I remember correctly, I had used a timeline package and definied a callback to draw the chart when the page is rendered, the drawChart() method instantiates a google.visualization.Timeline() and then fills a dataTable with the timeline dates. Inside the dataTable, the first column is the custom dates, and the second and third columns are the start and end times. These have the JavaScript Date type, but they could also be plain numbers. Finally, I invoked the draw() method of the chart, which displays it inside a div with the same identifier (timeline) used when container was declared in the first line of drawChart(). I hope you were able to understand this, also I had done this a couple of years back so I'm not sure if it works precisely. If this is a huge task, I would suggest you get in touch with an Enterprise Application Development Services provider. They would be able to assist you on this and you may not have to pay a lot of money. So do it on budget and within the requirements.  But please do try the code first. Cheers
Asked by
James
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
James
Top achievements
Rank 1
ricky
Top achievements
Rank 1
Iron
Share this question
or