search

mattlewis92 / angular-calendar

A flexible calendar component for angular 15.0+ that can display events on a month, week or day view.
https://mattlewis92.github.io/angular-calendar/
MIT License
2.73k stars 868 forks source link

Right Click option #172

Closed dineshdedhia closed 7 years ago

dineshdedhia commented 7 years ago

How can i implement right click option ? Is there any way to implement it ??

Thanks in advance Cheers :)

mattlewis92 commented 7 years ago

Right click where exactly? Do you mean to add a custom context menu when you right click?

On 4 Apr 2017, at 05:01, dineshdedhia notifications@github.com wrote:

How can i implement right click option ? Is there any way to implement it ??

Thanks in advance Cheers :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

dineshdedhia commented 7 years ago

Yes, I want something like context menu on calendar on particular date & time. Thanks Cheers :)

mattlewis92 commented 7 years ago

Which view? E.g. Month / week / day? And where abouts specifically?

On 4 Apr 2017, at 11:16, dineshdedhia notifications@github.com wrote:

Yes, I want something like context menu on calendar on particular date & time. Thanks Cheers :)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

dineshdedhia commented 7 years ago

On day view. My requirement is like where a user can open a context menu on specific time of a day.

dineshdedhia commented 7 years ago

@mattlewis92 rightclick

Something Like This.

Thanks

mattlewis92 commented 7 years ago

That's great, thanks for clarifying. The solution I have in mind will let you set a custom template for each row where you can use another 3rd party lib to add the context menu.

On 4 Apr 2017, at 13:33, dineshdedhia notifications@github.com wrote:

@mattlewis92

Something Like This.

Thanks

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

dineshdedhia commented 7 years ago

Ok Thanks,

dineshdedhia commented 7 years ago

I am waiting for your solution .. Thanks once again

Cheers :)

mattlewis92 commented 7 years ago

This is now possible in 0.12.0 by providing a custom template for the day view hour segment, I've added a demo which shows you how you could use this to implement a context menu here: https://mattlewis92.github.io/angular-calendar/#/context-menu

Hope that helps! 😄

dineshdedhia commented 7 years ago

@mattlewis92 I am working on angular 2 material, will this work ??

mattlewis92 commented 7 years ago

You could get the same result by using the md-menu instead of the ngx-contextmenu lib

dineshdedhia commented 7 years ago

error @mattlewis92 after installing 0.12.0, I am getting this error

mattlewis92 commented 7 years ago

See the breaking changes (you need to upgrade to angular 4): https://github.com/mattlewis92/angular-calendar/blob/master/CHANGELOG.md#breaking-changes

dineshdedhia commented 7 years ago

Thanks mate for your reply :) But can I get solution for angular 2. As our entire project is on angular 2

Thanks once again :)

mattlewis92 commented 7 years ago

I'm afraid angular 2 is no longer supported in this lib, upgrading takes about 5 minutes, it's literally changing your package.json to use ^4.0.0 for all angular packages and adding the angular/animations module. It should take 5 minutes to upgrade.

On 6 Apr 2017, at 08:27, dineshdedhia notifications@github.com wrote:

Thanks mate for your reply :) But can I get solution for angular 2. As our entire project is on angular 2

Thanks once again :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

dineshdedhia commented 7 years ago

@mattlewis92 this is my package,json { "name": "primer", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.0.1", "@angular/common": "^4.0.1", "@angular/compiler": "^4.0.1", "@angular/compiler-cli": "^4.0.1", "@angular/core": "^4.0.1", "@angular/flex-layout": "2.0.0-rc.1", "@angular/forms": "^4.0.1", "@angular/http": "^4.0.1", "@angular/material": "2.0.0-beta.2", "@angular/platform-browser": "^4.0.1", "@angular/platform-browser-dynamic": "^4.0.1", "@angular/platform-server": "^4.0.1", "@angular/router": "^4.0.1", "@swimlane/ngx-datatable": "6.1.2", "accordion": "^2.1.0", "angular-2-local-storage": "^1.0.1", "angular-calendar": "^0.12.0", "angular2-google-maps": "0.17.0", "angular2-material-chips": "^1.0.4", "angular2-material-datepicker": "^0.5.0", "angular2-tree-component": "2.8.1", "chart.js": "2.5.0", "core-js": "2.4.1", "d3": "4.5.0", "dragula": "3.7.2", "font-awesome": "^4.7.0", "hammerjs": "2.0.8", "intl": "1.2.4", "leaflet": "^1.0.2", "lodash": "^4.17.4", "md2-accordion": "0.0.1-alpha.0", "moment": "^2.18.1", "mydatepicker": "^1.7.14", "ng-pick-datetime": "^4.0.2", "ng2-charts": "1.5.0", "ng2-dragula": "1.3.0", "ng2-file-upload": "1.2.0", "ng2-translate": "5.0.0", "ng2-validation": "3.8.0", "ngx-contextmenu": "^1.0.1", "perfect-scrollbar": "^0.6.16", "quill": "1.2.2", "rxjs": "5.2.0", "screenfull": "^3.0.2", "showdown": "1.6.4", "typescript": "^2.2.2", "zone.js": "0.7.7" }, "devDependencies": { "@angular/cli": "1.0.0-rc.0", "@angular/compiler-cli": "2.4.7", "@types/core-js": "^0.9.37", "@types/jasmine": "2.5.43", "@types/node": "7.0.5", "codelyzer": "2.0.0", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "3.2.0", "karma": "1.5.0", "karma-chrome-launcher": "2.0.0", "karma-cli": "1.0.1", "karma-coverage-istanbul-reporter": "0.2.3", "karma-jasmine": "1.1.0", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.1.1", "ts-node": "2.1.0", "tslint": "4.5.0", "typescript": "2.0.10" } }

and this is error I am getting. console-error

Thanks again for being supportive :)

mattlewis92 commented 7 years ago

Expand the error message and it tells you what to do, you need to import the animations module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// in your root module
imports: [BrowserAnimationsModule]
dineshdedhia commented 7 years ago

Thanks @mattlewis92 , I just imported animations module in app.module,ts file.

Still I am getting this error. console-error

mattlewis92 commented 7 years ago

The mwl-demo-utils-calendar-header isn't part of this lib, it's only to save repeating code on the demos, just delete its usage from your app

dineshdedhia commented 7 years ago

Thanks Alot @mattlewis92 It Works , Can I Buy You A BEER

Thanks :)

dineshdedhia commented 7 years ago

Hello @mattlewis92,

How do I divide calendar day view in minutes. Eg. 12:00, 12:15, 12:30, 12:45, 1:00

Thanks in advance :)

On Thu, Apr 6, 2017 at 4:25 PM, Matt Lewis notifications@github.com wrote:

The mwl-demo-utils-calendar-header isn't part of this lib, it's only to save repeating code on the demos, just delete its usage from your app

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

-- Thanks & Regards,

mattlewis92 commented 7 years ago

Set [hourSegments]="4", demo here. The API docs with all available options are here.

dineshdedhia commented 7 years ago

Hello @mattlelewis92

I need division of minutes for hours segments should be something like this E.g 12:00, 12:15, 12:30, 12:45, 1:00

[image: Inline image 2]

On Fri, Apr 7, 2017 at 3:20 PM, Matt Lewis notifications@github.com wrote:

Set [hourSegments]="4", demo here https://mattlewis92.github.io/angular-calendar/#/day-view-hour-split. The API docs with all available options are here https://mattlewis92.github.io/angular-calendar/docs/components/CalendarDayViewComponent.html .

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

-- Thanks & Regards,

mattlewis92 commented 7 years ago

As in show all the times rather than just the hour?

mattlewis92 commented 7 years ago

You'll need to change the day view to show minutes as well as hours with a custom date formatter, as shown in this demo and then add a global CSS rule with something like:

.cal-day-view .cal-time {
  font-size: 11px;
  display: block !important;
}

which gets you this: http://plnkr.co/edit/iRyk8y7OoyiJRPSYQs76?p=preview

dineshdedhia commented 7 years ago

yes exactly

thanks @mattlewis92

Thanks alot :)

On Fri, Apr 7, 2017 at 4:04 PM, Matt Lewis notifications@github.com wrote:

You'll need to change the day view to show minutes as well as hours with a custom date formatter, as shown in this demo https://mattlewis92.github.io/angular-calendar/#/customise-date-formats and then add a global CSS rule with something like:

.cal-day-view .cal-time { font-size: 11px; display: block !important; }

which gets you this: http://plnkr.co/edit/iRyk8y7OoyiJRPSYQs76?p=preview

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

-- Thanks & Regards,

dineshdedhia commented 7 years ago

Hello @mattlewis92

will this work with angular 4 material ?? Because I am not using bootstrap

On Fri, Apr 7, 2017 at 4:16 PM, dinesh dedhia dinesh.dedhia87@gmail.com wrote:

yes exactly

thanks @mattlewis92

Thanks alot :)

On Fri, Apr 7, 2017 at 4:04 PM, Matt Lewis notifications@github.com wrote:

You'll need to change the day view to show minutes as well as hours with a custom date formatter, as shown in this demo https://mattlewis92.github.io/angular-calendar/#/customise-date-formats and then add a global CSS rule with something like:

.cal-day-view .cal-time { font-size: 11px; display: block !important; }

which gets you this: http://plnkr.co/edit/iRyk8y7OoyiJRPSYQs76?p=preview

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

-- Thanks & Regards,

  • Dinesh Dedhia*

-- Thanks & Regards,

mattlewis92 commented 7 years ago

This lib doesn't actually depend on bootstrap, I simply use it in the demo as my design skills are poor. It should adapt to any project (although you might need some styling changes to make it fit)

dineshdedhia commented 7 years ago

Hello @mattlewis92

Can you please guide me, in what all file you made changes ??

On Fri, Apr 7, 2017 at 4:41 PM, Matt Lewis notifications@github.com wrote:

This lib doesn't actually depend on bootstrap, I simply use it in the demo as my design skills are poor. It should adapt to any project (although you might need some styling changes to make it fit)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mattlewis92/angular-calendar/issues/172#issuecomment-292510104, or mute the thread https://github.com/notifications/unsubscribe-auth/ALcxZVrWdQwNk1Jll1W1rX5jERHtL-5Cks5rthnKgaJpZM4MyW__ .

-- Thanks & Regards,

mattlewis92 commented 7 years ago

Sorry I don't follow you

dineshdedhia commented 7 years ago

Hello @mattlewis92

Sorry for wrong question

anyways Thanks alot :)

On Fri, Apr 7, 2017 at 5:48 PM, Matt Lewis notifications@github.com wrote:

Sorry I don't follow you

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

-- Thanks & Regards,

Littlesingh commented 3 years ago

how can i disable context menu for next month dates and previous month dates @mattlewis92