Disable Time slot in Scheduler for angularjs

3 posts, 0 answers
  1. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 26 Mar 2018 Link to this post

    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. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 28 Mar 2018 Link to this post

    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.
  3. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 29 Mar 2018 in reply to Veselin Tsvetanov Link to this post

    thank you for the help Veselin Tsvetanov :)
Back to Top