Multiselect

Этот контрол предоставляет группу чекбоксов.

примечание

Активируйте расширение multiselect, чтобы использовать элемент управления в лайтбоксе

scheduler.plugins({
    multiselect: true /*!*/
});

scheduler.locale.labels.section_userselect = "Participants";
 
scheduler.config.lightbox.sections= [    
    { name:"description", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("users"), vertical:"false" },
    { name:"time", height:72, type:"time", map_to:"auto"}    
];

Контроль Multiselect в лайтбоксе

Инициализация

Чтобы добавить контроль Multiselect в лайтбокс, выполните следующие шаги:

1. Активируйте на странице расширение 'multiselect':

scheduler.plugins({
    multiselect: true
});

2. Добавьте секцию в конфигурацию лайтбокса:

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("user_id"), vertical:false },
    { name:"time", ...}
];

3. Установите метку для секции:

scheduler.locale.labels.section_userselect = "Participants";

Контроль Multiselect в лайтбоксе

Свойства

Следующие свойства в основном важны и обычно задаются для элемента управления 'multiselect' (полный список см. здесь):

name	(string) имя секции
height	(number) высота секции
map_to	(string) имя свойства данных, которое будет сопоставлено секции
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) тип элемента управления секции
options	(array of objects) определяет варианты выбора управления (для контролов 'select', 'multiselect', 'radio', 'combo'). Каждый объект в массиве задаёт один вариант и имеет следующие свойства: key - (string) идентификатор варианта. Это свойство сравнивается с данным событием для сопоставления вариантов label - (string) подпись варианта
script_url	(string) путь к серверному скрипту, который будет предоставлять загрузку вариантов multiselect. Используется только в динамическом режиме. Необязательно
vertical	(boolean) задаёт, размещать ли кнопки multiselect вертикально (true) или горизонтально (для контролов 'multiselect' и 'radio')
delimiter	(string) задаёт разделитель, который будет использоваться для разделения значений мультиселекта. Если это свойство не задано, будет применяться конфигурация section_delimiter

Заполнение контролла данными

Обычно значения для кнопок мультиселекта задают через параметр options:

scheduler.config.lightbox.sections = [
    {   name:"userselect", type:"multiselect", 
        ...
        options:[
            { key: 1, label: 'George' },
            { key: 2, label: 'Nataly' },
            { key: 3, label: 'Diana' },
            { key: 4, label: 'Adam' }
    ]},
    ...
];

Элементы в параметре options должны иметь 2 обязательных свойства:

• key - идентификатор варианта
• label - подпись варианта

Заполнение флажков с сервера

Чтобы получить значения флажков с сервера, используйте метод serverList:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    { name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("users"), vertical:"false" },
    {name:"time", ...}
];

scheduler.load("api/data");

где api/data — это серверный скрипт, который возвращает события, загруженные в планировщик, и коллекцию значений для кнопок multiselect, как показано здесь в примере Examples of Data Formats:

//ответ
{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 00:00:00",
          "end_date":"2019-03-04 00:00:00",
          "text":"dblclick me!",
          "user_id":"1,2"
      },
      {
          "id":"2",
          "start_date":"2019-03-09 00:00:00",
          "end_date":"2019-03-11 00:00:00",
          "text":"and me!",
          "user_id":"2,3"
      }
   ], 
   "collections": {                         
      "users":[                          
         {"value":"1","label":"Лиза"},    
         {"value":"2","label":"Боб"},   
         {"value":"3","label":"Майк"}    
      ]                                     
   }                                        
}

примечание

Примечание: можно использовать метод updateCollection для обновления списка доступных вариантов

const oldOptions = scheduler.serverList("users").slice();
scheduler.updateCollection("users", [
         {"value":"4","label":"John"},    
         {"value":"5","label":"Paul"},   
         {"value":"6","label":"Ringo"},   
         {"value":"7","label":"George"}
]);

Динамическая загрузка

В статическом режиме все параметры событий хранятся как отдельное поле в базе данных, и вы можете позже использовать это поле для построения собственной логики. Это даёт дополнительные возможности, но требует большего количества запросов для загрузки всех опций.

В динамическом режиме ничего дополнительного не хранится. Опции загружаются по мере необходимости. Это уменьшает количество запросов, но отключает построение какой-либо логики.

На стороне сервера код должен быть аналогичным следующему

Чтобы включить динамический режим, следует использовать свойство script_url вместе с options:

scheduler.config.lightbox.sections = [
    {name:"userselect", height:22, map_to:"user_id", type:"multiselect", 
    options: scheduler.serverList("user_id"),
    script_url:'api/options'},
    ...
];

где api/options возвращает следующий JSON:

[                          
    {"value":"1","label":"Лиза"},    
    {"value":"2","label":"Боб"},   
    {"value":"3","label":"Майк"}    
]