twinssbc / Ionic-Calendar

A calendar directive for Ionic framework
http://twinssbc.github.io/Ionic-Calendar/demo
MIT License
159 stars 73 forks source link

Options usage #35

Closed danny-36 closed 8 years ago

danny-36 commented 8 years ago

How can I use options from my controller?

twinssbc commented 8 years ago

@danny-36 You can refer to the demo page.

danny-36 commented 8 years ago

for example how can I set "allDayLabel" from my template?

twinssbc commented 8 years ago

@danny-36 You can set the "allDayLabel" like below.

<calendar ng-model="calendar.currentDate" calendar-mode="calendar.mode" event-source="calendar.eventSource"
      range-changed="reloadSource(startTime, endTime)"
      event-selected="onEventSelected(event)" title-changed="onViewTitleChanged(title)"
      time-selected="onTimeSelected(selectedTime)" all-day-label="allDay"></calendar>
danny-36 commented 8 years ago

doesn' t work. Can I set from my controller?

twinssbc commented 8 years ago

No, you can't, the option needs to be declared in the html.

danny-36 commented 8 years ago

this is my template. <calendar ng-model="calendar.currentDate" calendar-mode="calendar.mode" event-source="calendar.eventSource" range-changed="reloadSource(startTime, endTime)" event-selected="onEventSelected(event)" title-changed="onViewTitleChanged(title)" time-selected="onTimeSelected(selectedTime)" all-day-label="Tutto il giorno" step="30">

If I click on a all day event the label show is "all day" not "Tutto il giorno"

twinssbc commented 8 years ago

Ah, ok, the all-day-label option only applies to week view and day view right now. I will make it work for month view.

danny-36 commented 8 years ago

screenshot 11

twinssbc commented 8 years ago

You need to adjust the width of the first column to fit your text. For example,

.calendar-hour-column, .weekview-allday-label, .dayview-allday-label {
    width: 100px;
}

.weekview-allday-content-wrapper, .dayview-allday-content-wrapper {
    margin-left: 100px;
}
danny-36 commented 8 years ago

It seems more a problem of line-height

twinssbc commented 8 years ago

Yes, you can also adjust line-height if you want to wrap the text into multiple lines.

danny-36 commented 8 years ago

I added this:

.calendar-hour-column, .weekview-allday-label, .dayview-allday-label {
  line-height: normal;
}

and works! thanks.