tooltip dynamically positioning

[Venkat-31]

how to positioning the tool tip dynamically based on the position of an event in viewport
In Existing type we can only set tooltipplacement statically.<!---

FAQ (please read!):

Problems with build tooling? Please check the examples folder first: https://github.com/mattlewis92/angular-calendar/tree/master/build-tool-examples

Styling not appearing? Make sure you're including node_modules/angular-calendar/css/angular-calendar.css

Please note that issues that ignore this template will be closed without notice!

-->

Describe the bug

Minimal reproduction of the problem with instructions

Screenshots

Versions

• @angular/core:
• angular-calendar:
• Browser name and version:

[mattlewis92]

This makes sense, I've included auto positioning of all tooltips out the box in the next version, please can you give it a try here: #589 Thanks! 😄

[waqaskamran]

How can we add an event from selecting date instead of button in calendar month view

What i want https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/index.htm

[AhHa45]

I did it this way:

public getTooltipPlacement(event: CalendarEvent): string {
        if (event) {
// e.g. if you have weekends you want the tool tip on the left side, so its still readable.
            if (event.start.getDay() === DAYS_OF_WEEK.SATURDAY || event.start.getDay() === DAYS_OF_WEEK.SUNDAY) {
                return "left";
            } else {
// or if the event is near to the bottom show it on top 
                if (event.start.getUTCHours() >= 16) {
                    return "top";
                }
            }
            return "right";
        }
        return "right";
    }

[AhHa45]

@sayjavajava use week hours view and use the hourSegmentClicked Output()

like this:

<iq-calendar-week-hours-view [tooltipPlacement]="'right'"
                             [locale]="locale"
                             [viewDate]="viewDate"
                             [events]="events"
                             [refresh]="refresh"
                             [dayStartHour]="dayStartHour"
                             [dayEndHour]="dayEndHour"
                             [weekStartsOn]="firstDayOfWeek"
                             [headerTemplate]="customHeaderTemplate"
                             [hourSegmentHeight]="24"
                             [hourSegmentTemplate]="customHourSegmentTemplate"
                             [eventTemplate]="customEventTemplate"
                             (hourSegmentClicked)="addEvent($event)"
                             (eventTimesChanged)="eventTimesChanged($event)">
</iq-calendar-week-hours-view>