search

twinssbc / AngularJS-ResponsiveCalendar

A pure AngularJS responsive calendar directive
http://twinssbc.github.io/AngularJS-ResponsiveCalendar/demo/
MIT License
112 stars 77 forks source link

Angular Material usage #48

Open peio72 opened 8 years ago

peio72 commented 8 years ago

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

twinssbc commented 8 years ago

@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.

screen shot 2016-03-15 at 7 52 02 pm

peio72 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

twinssbc commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

Sure, I will take a look.

TejasCMehta commented 8 years ago

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

Thanks for the great plugin!! :+1:

twinssbc commented 8 years ago

@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.