Кендо UI (Scheduler) - Изменить заголовок «Сегодня» текст в центр вместо левого

Как я могу переместить Кендо Планировщик «Сегодня» текст посередине (после левая стрелка) вместо крайним левымКендо UI (Scheduler) - Изменить заголовок «Сегодня» текст в центр вместо левого

Online Demo

источник

2015-12-23 Reddy

Пожалуйста, добавьте ниже стиля в существующий код для достижения требуемого поведения.

<style> 
     .k-nav-today { 
      border-radius: 0px !important; 
     } 

     .k-nav-prev { 
      float: left; 
      border-width: 1px 0 1px 1px !important; 
      border-radius: 4px 0 0 4px; 
     } 
    </style>

Полный пример кода

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
    <style> 
     .k-nav-today { 
      border-radius: 0px !important; 
     } 

     .k-nav-prev { 
      float: left; 
      border-width: 1px 0 1px 1px !important; 
      border-radius: 4px 0 0 4px; 
     } 
    </style> 
</head> 
<body> 
    <div id="scheduler"></div> 
    <script> 
     $(document).ready(function() { 
      $("#scheduler").kendoScheduler({ 
       date: new Date("2013/6/13"), 
       startTime: new Date("2013/6/13 07:00 AM"), 
       height: 600, 
       views: [ 
        "day", 
        { type: "workWeek", selected: true }, 
        "week", 
        "month", 
        "agenda", 
        { type: "timeline", eventHeight: 50 } 
       ], 
       timezone: "Etc/UTC", 
       dataSource: { 
        batch: true, 
        transport: { 
         read: { 
          url: "http://demos.telerik.com/kendo-ui/service/tasks", 
          dataType: "jsonp" 
         }, 
         update: { 
          url: "http://demos.telerik.com/kendo-ui/service/tasks/update", 
          dataType: "jsonp" 
         }, 
         create: { 
          url: "http://demos.telerik.com/kendo-ui/service/tasks/create", 
          dataType: "jsonp" 
         }, 
         destroy: { 
          url: "http://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 } 
         ] 
        } 
       }, 
       resources: [ 
        { 
         field: "ownerId", 
         title: "Owner", 
         dataSource: [ 
          { text: "Alex", value: 1, color: "#f8a398" }, 
          { text: "Bob", value: 2, color: "#51a0ed" }, 
          { text: "Charlie", value: 3, color: "#56ca85" } 
         ] 
        } 
       ] 
      }); 

      $("#people :checkbox").change(function (e) { 
       var checked = $.map($("#people :checked"), function (checkbox) { 
        return parseInt($(checkbox).val()); 
       }); 

       var scheduler = $("#scheduler").data("kendoScheduler"); 

       scheduler.dataSource.filter({ 
        operator: function (task) { 
         return $.inArray(task.ownerId, checked) >= 0; 
        } 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html>

Update 1: -

<style> 
    .k-nav-today { 
     border-radius: 0px !important; 
    } 

    .k-nav-prev { 
     float: left; 
     border-width: 1px 0 1px 1px !important; 
     border-radius: 4px 0 0 4px; 
    } 

    /*left arrow*/ 
    .k-i-arrow-w { 
     background-image: url("http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-arrow-right-icon.png") !important; 
     background-position: initial !important; 
    } 

    /*right arrow*/ 
    .k-i-arrow-e { 
     background-image: url("http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-arrow-right-icon.png") !important; 
     background-position: initial !important; 
    } 
</style>

Позвольте мне знать, если какой-либо интерес.

источник

2015-12-23 07:05:51

** @ Jayesh Goyani ** .. работающий как очарование ... Спасибо за быстрый ** TIP **. Я ** Принимаю ** ваш ответ и upvoting тоже :) – Reddy

И как я могу расширять класс для стрелок и сегодняшнего текста, если я хочу изменить эти иконки? – Reddy

Я обновил свой выше ответ в соответствии с запросом. –

Кендо UI (Scheduler) - Изменить заголовок «Сегодня» текст в центр вместо левого

ответ

Смежные вопросы