Project logo

Tyler's Projects

Auto~Cal jQuery Plugin

File Size: 1 KB
View Total: 0
Last Updated: May 5, 2018
Date Published: May 4, 2018

This plugin will display the current month and day in a fun calendar look icon. It can be customized to a center date as well as the colors can be customized to fit your website design.

1. Download the file and add it to your project file
2. Include the jQuery CDN and the following script sources to the head of your page


                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <script src="jquery.autoCal.js" charset="utf-8"></script>
                    <script src="plugins.js" charset="utf-8"></script>
                    

2. Insert the following div tag in your HTML page where you want to add the calendar


                    <div id="auto-cal""></div>
                    

3. In your plugins.js file add the following code for default settings


                        $(function() {
                            $("#auto-cal").autoCal();
                        })
                    

Options


                        $(function() {
                            $("#auto-cal").autoCal({
                                month: "June",
                                day: "25",
                                mColor: "green",
                                dColor: "white",
                                width: "100px",
                                height: "100px"
                            });
                        })