Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right Click option #172

Closed
dineshdedhia opened this issue Apr 4, 2017 · 32 comments
Closed

Right Click option #172

dineshdedhia opened this issue Apr 4, 2017 · 32 comments

Comments

@dineshdedhia
Copy link

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

Thanks in advance
Cheers :)

@mattlewis92
Copy link
Owner

mattlewis92 commented Apr 4, 2017 via email

@dineshdedhia
Copy link
Author

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

@mattlewis92
Copy link
Owner

mattlewis92 commented Apr 4, 2017 via email

@dineshdedhia
Copy link
Author

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

@dineshdedhia
Copy link
Author

@mattlewis92
rightclick

Something Like This.

Thanks

@mattlewis92
Copy link
Owner

mattlewis92 commented Apr 4, 2017 via email

@dineshdedhia
Copy link
Author

Ok Thanks,

@dineshdedhia
Copy link
Author

dineshdedhia commented Apr 5, 2017

I am waiting for your solution .. Thanks once again

Cheers :)

@mattlewis92
Copy link
Owner

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
Copy link
Author

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

@mattlewis92
Copy link
Owner

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

@dineshdedhia
Copy link
Author

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

@mattlewis92
Copy link
Owner

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

@dineshdedhia
Copy link
Author

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
Copy link
Owner

mattlewis92 commented Apr 6, 2017 via email

@dineshdedhia
Copy link
Author

@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
Copy link
Owner

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
Copy link
Author

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

Still I am getting this error.
console-error

@mattlewis92
Copy link
Owner

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
Copy link
Author

dineshdedhia commented Apr 6, 2017

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

Thanks :)

@dineshdedhia
Copy link
Author

dineshdedhia commented Apr 7, 2017 via email

@mattlewis92
Copy link
Owner

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

@dineshdedhia
Copy link
Author

dineshdedhia commented Apr 7, 2017 via email

@mattlewis92
Copy link
Owner

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

@mattlewis92
Copy link
Owner

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
Copy link
Author

dineshdedhia commented Apr 7, 2017 via email

@dineshdedhia
Copy link
Author

dineshdedhia commented Apr 7, 2017 via email

@mattlewis92
Copy link
Owner

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
Copy link
Author

dineshdedhia commented Apr 7, 2017 via email

@mattlewis92
Copy link
Owner

Sorry I don't follow you

@dineshdedhia
Copy link
Author

dineshdedhia commented Apr 8, 2017 via email

@Littlesingh
Copy link

Littlesingh commented Sep 27, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants