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

Disable Time slot in Scheduler for angularjs

2 Answers 59 Views
This is a migrated thread and some comments may be shown as answers.
Nithin
Top achievements
Rank 1
Nithin asked on 26 Mar 2018, 10:40 AM

I was able to create a scheduler in jquery with vertical grouping and I also disabled timeSlot in it but I'm facing some issues in Angularjs.

I'm not able to disable timeSlot in angularjs

$scope.schedulerOptions = {
        eventHeight: 20,
               majorTick: 1440,//set major tick to full day and leave the default startTime/endTime
                minorTickCount: 1,//show only one minor tick
                majorTimeHeaderTemplate: "",
        ShowTimeRuler :false,
        timeSlot:false,
                editable: {
                    template: $("#customEditorTemplate").html()
                },
               date: new Date("2013/6/13"),
               startTime: new Date("2013/6/13 07:00 AM"),
              height: 600,
              views: [
                 {
                 type: "week",
             selected: true ,
              dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M')#</span>"
             }
            ],
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
                        dataType: "jsonp"
                    },
                    create: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: { from: "TaskID", type: "number" },
                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceID" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            ownerId: { from: "OwnerID", defaultValue: 1 },
                            isAllDay: { type: "boolean", from: "IsAllDay" }
                        }
                    }
                },
                filter: {
                    logic: "or",
                    filters: [
                        { field: "ownerId", operator: "eq", value: 1 },
                        { field: "ownerId", operator: "eq", value: 2 }
                    ]
                }
            },
            dataBound: function(e) {
         
                    //hide the times row from the date/time header:
                    var view = this.view();
                    view.datesHeader.find("tr:last").prev().hide();
                    view.timesHeader.find("tr:last").prev().hide();
                     
                     
                    //Required: remove only last table in dataBound when grouped
                     
                    var tables = $(".k-scheduler-times .k-scheduler-table");
                    tables = tables.last();
 
                    var rows = tables.find("tr");
 
                    rows.each(function() {
                      $(this).children("th:last").hide();
                    });
                   
                },
            group: {
                resources: ["Rooms"],
                orientation: "vertical"
            },
            resources: [
                {
                    field: "roomId",
                    name: "Rooms",
                    dataSource: [
                        { text: "Room 101", value: 1, color: "#6eb3fa" },
                        { text: "Room 201", value: 2, color: "#f58a8a" },
                        { text: "Room 301", value: 3, color: "#2c0eca" },
                        { text: "Room 401", value: 4, color: "#ed8312" },
                        { text: "Room 501", value: 5, color: "#2cdeca" },
                        { text: "Room 601", value: 6, color: "#c3ff42" },
                        { text: "Room 701", value: 7, color: "#3aeeca" },
                        { text: "Room 801", value: 8, color: "#21d187" },
                        { text: "Room 901", value: 9, color: "#5371a0" },
                    ],
                    title: "Room"
                },
                {
                    field: "ownerId",
                    title: "Owner",
                    dataSource: [
                        { text: "Alex", value: 1, color: "#f8a398" },
                        { text: "Bob", value: 2, color: "#51a0ed" },
                        { text: "Charlie", value: 3, color: "#56ca85" }
                    ]
                }
            ]
        };


2 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 28 Mar 2018, 09:57 AM
Hello Nithin,

As far as I can understand, you would like to remove from the Week view the day slots, which are not all day slots. If this is the case, you could do that by applying the following CSS rule:
.k-scheduler-content .k-scheduler-table tbody tr[role="row"]:not(.k-scheduler-header-all-day) {
  display: none;
}

Here you will find a Dojo sample implementing the above suggestion.

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
Nithin
Top achievements
Rank 1
answered on 29 Mar 2018, 07:37 AM
thank you for the help Veselin Tsvetanov :)
Asked by
Nithin
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Nithin
Top achievements
Rank 1
Share this question
or