Giter VIP home page Giter VIP logo

Comments (10)

twinssbc avatar twinssbc commented on July 24, 2024

@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

from angularjs-responsivecalendar.

peio72 avatar peio72 commented on July 24, 2024

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.

from angularjs-responsivecalendar.

peio72 avatar peio72 commented on July 24, 2024

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.

from angularjs-responsivecalendar.

twinssbc avatar twinssbc commented on July 24, 2024

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.

from angularjs-responsivecalendar.

peio72 avatar peio72 commented on July 24, 2024

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

from angularjs-responsivecalendar.

twinssbc avatar twinssbc commented on July 24, 2024

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.

from angularjs-responsivecalendar.

peio72 avatar peio72 commented on July 24, 2024

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

from angularjs-responsivecalendar.

twinssbc avatar twinssbc commented on July 24, 2024

Sure, I will take a look.

from angularjs-responsivecalendar.

TejasCMehta avatar TejasCMehta commented on July 24, 2024

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

Thanks for the great plugin!! 👍

from angularjs-responsivecalendar.

twinssbc avatar twinssbc commented on July 24, 2024

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

from angularjs-responsivecalendar.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.