Блог

Я сталкиваюсь с проблемой отображения точек событий в одну дату. Однако мне удалось отобразить цвет события в виде квадратного прямоугольника. Но я хочу отобразить это как точку. События поступают из API. Есть предложения, как я могу преодолеть эту проблему?

Когда я нажимаю на определенную дату, он извлекает соответствующие события из API и показывает события на эту конкретную дату. Цвет также поступает из запроса API. Мне просто нужно показать события с дополнительными точками соответствующего цвета из API

Можно ли использовать компонент Angular в приложении Nativescript? Тогда я мог бы использовать angular component!

Это HTML-файл компонента calendar!

 <StackLayout row="0">
        <RadCalendar [monthViewStyle]="monthViewStyle" [eventSource]="eventSource" [selectedDate]="defaultDate"
            (dateSelected)="onDateSelected($event)" row="0" (navigatedToDate)="onNavigatedToDate($event)"></RadCalendar>
    </StackLayout>
  

 bindEventsInCalender(date: string) {

    this._calendarApiService.getCalendarData(date).subscribe((data: any) => {

      var listCal = data;
      let event: CalendarEvent;
      this.calendarEvents = [];
      let events: Array<CalendarEvent> = new Array<CalendarEvent>();
      for (let i = 0; i < listCal.length; i  ) {
        // console.log(new Date(listCal[i].date));

        event = new CalendarEvent(
          listCal[i].title,
          new Date(listCal[i].date),
          new Date(listCal[i].date),
          false,
          new Color(listCal[i].colour)
        );

        // this.calendarEvents.push(new CalendarClass(new Date(listCal[i].date), listCal[i].colour, listCal[i].title, listCal[i].statusid, listCal[i].id));
        this.updateCalendarEvent(listCal[i]);

        events.push(event);
      }
      // console.log(this.calendarEvents);

      if (this._events_mirror.length > 0) {
        this._events_mirror.forEach(element => {
          events.push(element);
        });
      }
      this._events = events;
      if (this.appRunFirstTime) {
        this.appRunFirstTime = false;
        this.defaultDate = new Date();
      }
    });
  }
  

Здесь у меня есть пример реализации пользовательского средства визуализации событий для {N} Android. Вам придется расширить базовый класс com.telerik.widget.calendar.events.EventRenderer и использовать renderEvents метод для рисования чего-либо в ячейке календаря. В примере показано, как вы можете нарисовать круг вместо прямоугольника по умолчанию для обозначения событий. Вы даже можете добавить больше точек с помощью paint API.