Angular Material usage

[peio72]

Do you think this could be portable for use with angular material framework ?

[twinssbc]

@peio72 I played with angular material framework. The calendar can be nicely embedded into content as the screenshot.
But the calendar currently depends on bootstrap. So I have to add bootstrap into the reference. Not sure if it will cause any compatibility issue.

[peio72]

Hello, thanx for this test. The idea would be to get rid of bootstrap and use only the angular material framework. Juste need to modify the templates using specific framework code. Could you tell me if possible and if could help for this.

[peio72]

I tested with my app and i can confirm bootstrap.css is creating issues with the angular material framework components. So really need a specific template version.

[twinssbc]

Yes, I think it's possible. The bootstrap css classes the calendar depends on are the grid system and some icon. As long as there's equivalent css classes, then should be easy to get rid of bootstrap.

[peio72]

Please could you explain how to proceed ? Which files need to be modified for new templating ?

[twinssbc]

First you need to fork my repository.
Then in the template/rcalendar folder, it stores the template html files.

In calendar.html, the div with "calendar-navbar" is using some bootstrap button icons and grid system to generate the navigation bar. You can fully replace them with angular material directives.

In month.html/week.html/day.html, the dependent bootstrap classes are "table", "table-bordered", "table-striped", "table-fixed". They just make the table occupy full width and provides the border and background colour. You can achieve the same effect by using your own styles.
After you made the change, you can run the "grunt build-tpls" to generate the minimized version in the list folder.
Feel free to let me know if you need more explanation. Thanks.

[peio72]

Ok I tried but not success manipulating your code to adapt to material design equivalent. I give up. Maybe you could be interested to port it to angular material one day.

You can have a look at this basic plugin:

https://github.com/jsmodules/angular-material-calendar

[twinssbc]

Sure, I will take a look.

[TejasCMehta]

@twinssbc , Have you looked at that plugin. I need Angular Material support too!!

Thanks for the great plugin!! 👍

[twinssbc]

@TejasCMehta As I said in the previous comments, you can still embed the calendar into Angular Material. It just won't be that fancy like angular-material-calendar as it's using native control.
I certainly will look at porting my calendar to Angular Material, but I'm a bit busy right now, so probably won't build a version in short term.