Calendar Display Component

Overview


The Groundswell Calendar Display, powered by ToastUI, gives designers the ability to quickly have a modern calendar display in their sites and dashboards with the simplicity of a single component. The dense, versatile display supports different calendar views with styling matching your site’s accent color. Example interfaces and utility rules are attached, which demonstrate usage and features of the component.

Key Features & Functionality

  • Display an array of events in Daily, Weekly, or Monthly format. Toggle days and weeks using an input parameter.
  • Automatic timezone shifting. By default, all provided events display in the timezone of your browser, but this can be overridden by providing TZ names ("America/Los_Angeles") OR a timezone code (EDT,CST,etc).
  • Multiple language support. Currently supports US English (en-US), UK English (en-GB), Spanish (es), Italian (it), Polish (pl), and Portuguese (pt).
  • Supports different date formats via a parameter.
  • Supports a detailed event pop-up of time, title, attendees, location, and event description.
  • Supports custom colors, font sizes, borders, and other attributes via applying custom themes.
  • Support for visible weeks, weekend display, and start of week for specific locale needs.
  • Allows event selection, should you want to edit an event or display details in addition to, or in lieu of, the detailed pop-up view.
  • Allows events to be "rescheduled" via drag and drop or through a modal
  • Allows events to be created and deleted directly from the calendar
  • Supports multiple calendars
  • More details and examples available in attached resources and sample application.
Anonymous
  • would be to add the 'startDayOfWeek' parameter which is in the ToastUI component itself: 
    nhn.github.io/.../CalendarCore
  • Could you add a parameter to choose which day of the week the calendar starts on? 
    In Spain the calendar starts from Monday to Sunday, instead of Sunday to Saturday
  • Hi, here is the translation for Portuguese and Polish, I'll be very grateful if you can add them to the plugin in a future version. I've replaced the special chars for the unicode value, if you need the original text I can provided it. Thank you so much!

    'pt' : {
    month0: 'Janeiro',
    month1: 'Fevereiro',
    month2: 'Mar\u00e7o',
    month3: 'Abril',
    month4: 'Maio',
    month5: 'Junho',
    month6: 'Julho',
    month7: 'Agosto',
    month8: 'Setembro',
    month9: 'Outubro',
    month10: 'Novembro',
    month11: 'Dezembro',
    day0: 'Dom',
    day1: 'Seg',
    day2: 'Ter\u00e7',
    day3: 'Qua',
    day4: 'Qui',
    day5: 'Sex',
    day6: 'S\u00e1b',
    allDay:'Todo o dia',
    milestone:'Marco',
    task:'Tarefa',
    detailAttendees: 'Participantes: ',
    detailLocation: 'Localiza\u00e7\u00e3o: ',
    detailRecurrence: 'Recorr\u00eancia: ',
    validationView:'Vista inv\u00e1lida selecionada. As vistas v\u00e1lidas s\u00e3o "DAY","WEEK","MONTH"',
    validationWeekend:'Vista de fim de semana inv\u00e1lida selecionada. As vistas v\u00e1lidas s\u00e3o "FULL","NARROW","NONE"',
    validationVisibleWeeks:'As semanas vis\u00edveis t\u00eam de ser superiores a 0'
    }

    'pl' : {
    month0: 'Stycze\u0144',
    month1: 'Luty',
    month2: 'Marzec',
    month3: 'Kwiecie\u0144',
    month4: 'Maj',
    month5: 'Czerwiec',
    month6: 'Lipiec',
    month7: 'Sierpie\u0144',
    month8: 'Wrzesie\u0144',
    month9: 'Pa\u017Adziernik',
    month10: 'Listopad',
    month11: 'Grudzie\u0144',
    day0: 'Niedz',
    day1: 'Pon',
    day2: 'Wt',
    day3: '\u015Ar',
    day4: 'Czw',
    day5: 'Pt',
    day6: 'Sob',
    allDay:'Ca\u0142y dzie\u0144',
    milestone:'Milestone',
    task:'Zadanie',
    detailAttendees: 'Uczestnicy: ',
    detailLocation: 'Lokalizacja: ',
    detailRecurrence: 'Powtarzalno\u015B\u0107: ',
    validationView:'Wybrano nieprawid\u0142owy widok. Prawid\u0142owe widoki to "DAY","WEEK","MONTH"',
    validationWeekend:'Wybrano nieprawid\u0142owy widok weekendu. Prawid\u0142owe widoki to "FULL","NARROW","NONE"',
    validationVisibleWeeks:'Widoczne tygodnie musz\u0105 by\u0107 wi\u0119ksze ni\u017C 0'
    }

  • v4.2.0 Release Notes
    • Calendar no longer fails to load when Arabic [ar] locale is used. Instead, the calendar defaults to en-US as is consistent with all other unsupported locales.
  • This issue has been addressed in the latest update. Please note, this is not full Arabic support, but rather ensuring the calendar does not break for this language.

  •  I prefer adding full localization support vs adding parameters. I don't speak those languages, so if your team has the capability to provide translations, I'd be happy to include them in the product roadmap.

    Here is the en-US template:

    'en-US' : {
    month0: 'January',
    month1: 'February',
    month2: 'March',
    month3: 'April',
    month4: 'May',
    month5: 'June',
    month6: 'July',
    month7: 'August',
    month8: 'September',
    month9: 'October',
    month10: 'November',
    month11: 'December',
    day0: 'Sun',
    day1: 'Mon',
    day2: 'Tues',
    day3: 'Wed',
    day4: 'Thurs',
    day5: 'Fri',
    day6: 'Sat',
    allDay:'All Day',
    milestone:'Milestone',
    task:'Task',
    detailAttendees: 'Attendees: ',
    detailLocation: 'Location: ',
    detailRecurrence: 'Recurrence: ',
    validationView:'Invalid View Selected. Valid views are "DAY","WEEK","MONTH"',
    validationWeekend:'Invalid Weekend View Selected. Valid views are "FULL","NARROW","NONE"',
    validationVisibleWeeks:'Visible weeks must be greater than 0'
    }

  • Hi, will it be considered the suggestion I made of adding two more parameters to provide custom translations for months and days? If not, could be added the translation for Polish and Portuguese in a future update? Thanks!

  • As Arabic is currently an unsupported language, and it is a large effort to ensure effective RTL support, the immediate update I can provide is ensuring it loads properly with a default locale of en-US. The result will look like the following:

      

    This will be submitted to Appian in the coming days.

  • The same issue appears (NAN) for Arabic Interfaces, 

    Can you please fix it?