Angular-calendar: Is there a way to make the events listed out by name on the actual date.

[xtianus79]

Sorry,

this may be in the documentation but I have yet to find it.

I would like to list out the events on the page per date and forgo the animation drop down of events nested behind the calendar.

Is there a straight forward way to do this?

[mattlewis92]

I'm afraid there is no way of disabling the slidebox animation, AFAIK there is no way in angular to conditionally disable an animation. Once custom templates are implemented you'll be able to use your own template without the animation property set.

[xtianus79]

ok we are ok with keeping the animation... but is there a way to list out the events on the actual date for the month?

[mattlewis92]

Sorry I don't quite follow what you mean?

[xtianus79]

sorry...

so on the month for each day... i.e. the 6th we want to list out the event on the particular day in the box for that day of the calendar. The sub section and animation is fine but we would like to also list out the events per the day on the calendar ui box for that day.

[mattlewis92]

Oh as in retrieve the events that are listed on that day?

[xtianus79]

yes... well to retrieve them and put them on the calendar for the month to list out the events to the end user

[mattlewis92]

So for this example you'd want to get the "A 3 day event" event?

[xtianus79]

yes so for the 7th i want to see "A 3 day event" list out as a line on the 7th box.

[mattlewis92]

Oh do you mean for the events to span multiple days?

[xtianus79]

not even multiple days... just the event for that day... but yes just like you show on the 8th

[mattlewis92]

Oh right, no there's not a way of doing this, you only have the colored dots. Once custom templates are implemented you'll be able to do something like this yourself

[xtianus79]

ok do you know when that will be implemented... and if not very soon would this be a hard "adjustment/hack" to achieve from your perspective?

[mattlewis92]

I have no idea when it’ll be implemented, I work on this project (along with several dozen more) in my free time. For now you could just fork the library and implement the change you need, and then once custom templates are implemented use this lib again.

Because of the limitations of angular there is no way to currently hack this in without forking the library.

Kind regards,
Matt Lewis

On 7 Dec 2016, at 17:14, xtianus79 [e-mail] wrote:

ok do you know when that will be implemented... and if not very soon would this be a hard "adjustment/hack" to achieve from your perspective?

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub https://github.com/mattlewis92/angular-calendar/issues/98#issuecomment-265509409, or mute the thread https://github.com/notifications/unsubscribe-auth/AGIMMX3nTZtBSrjxnJlA7zw0SOn3qlvHks5rFulzgaJpZM4LGxTd.

[xtianus79]

true... Thank you @mattlewis92

[SamindaK]

Hi @mattlewis92 i made the changes on the same issue by forking it. is there a way for me to publish it to npm ?

[mattlewis92]

Change the package name in package.json and run npm run release

[SamindaK]

Thanks @mattlewis92 i did make the changes and used npm publish
Thanks for the brilliant code. current calendar of mine

[xtianus79]

@mattlewis92 and @SamindaK so is this available now in the current build? What did you do to accomplish this? thanks

[mattlewis92]

@xtianus79 it's currently not possible without forking the repo, I'm going to try and get custom templates done this week though as I have a clean way of implementing it now 😃

[kwilliams]

Can you re-open this ticket. This calendar is much better than the fullcalendar version in my opinion, but it's much harder to provide a birds eye view of events when limited to only viewing titles of the selected day. Also due to this resizing functionality is non existent from the monthly view.

[mattlewis92]

@kwilliams This is actually possible now in 0.9.0 onwards. If you follow the custom templates demo but use the openDayEventsTemplate input instead of cellTemplate you can pass a template in to customise the events list like so:

    <ng-template #customTemplate let-events="events" let-eventClicked="eventClicked">
      <div
        *ngFor="let event of events"
        [ngClass]="event?.cssClass">
        <span
          class="cal-event"
          [style.backgroundColor]="event.color.primary">
        </span>
        <mwl-calendar-event-title
          [event]="event"
          view="month"
          (click)="eventClicked.emit({event: event})">
        </mwl-calendar-event-title>
        <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
      </div>
    </ng-template>

<mwl-calendar-month-view [openDayEventsTemplate]=""></mwl-calendar-month-view>

Hope that helps!

[kwilliams]

Thanks for the response this was helpful!

On Fri, Mar 24, 2017 at 5:18 PM, Matt Lewis [e-mail]
wrote:

@kwilliams https://github.com/kwilliams This is actually possible now
in 0.9.0 onwards. If you follow the custom templates
https://mattlewis92.github.io/angular-calendar/#/custom-templates demo
but use the openDayEventsTemplate input instead of cellTemplate you can
pass a template in to customise the events list like so:

<ng-template #customTemplate let-events="events" let-eventClicked="eventClicked">
  <div
    *ngFor="let event of events"
    [ngClass]="event?.cssClass">
    <span
      class="cal-event"
      [style.backgroundColor]="event.color.primary">
    </span>
    <mwl-calendar-event-title
      [event]="event"
      view="month"
      (click)="eventClicked.emit({event: event})">
    </mwl-calendar-event-title>
    <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
  </div>
</ng-template>

Hope that helps!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mattlewis92/angular-calendar/issues/98#issuecomment-289156506,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAM4YI3c0OGqLaLRhZGUwM2Zs39g3UaDks5rpEFRgaJpZM4LGxTd
.

[kattakranthi]

Hi mattlewis92,

can you please let me know if span multiple days is available in Angular 5 version?

Thanks.

[bergmito]

@mattlewis92 Is this possible?

[mattlewis92]

Sorry there's no support for this UX (it's non trivial to implement).

[ImenTaieb]

@mattlewis92 Please i need help i want to implement this solution with month view is this possible to use custom template ?

[AngularDe]

@mattlewis92 @ImenTaieb Were able to implement this or is it possible to do it using the custom template ? Thanks.

[BiStokeCity]

Hi everybody, i would like to add new event in @freetime (week view) and i expect result is event's color continuity but i receive striped (e.g: green, red, green, red). green freetime. red busy. Thank so much.

[BiStokeCity]

Event over event. Sr because my English not good.

[abhishek-patel]

@SamindaK I want to create a calendar similar to yours "Pricing calendar". Initially my calendar will show Dr's availability and user will be able to book their appointment on the basis of Dr's availability. Could you please share the code what changes you have made in calendar for "Pricing Calendar".

[najah1501]

Im not able to show title instead of title being represented by dots in month view calendar. I want to show the title itself.How to achieve this. Anyone can help?