Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
4 posts Page 1 of 1
The attached file contains a Fully Responsive Calendar Page/Module that integrates the Date Picker Module (included in files and code), the Color Picker Module (included in file), and Google Maps API3 (no key needed).

The Calendar Admin page includes Google's address auto-complete function for entering the address. The public end will then automatically Geocode the address and display it in a ROADMAP as well as a STREETMAP (all code is included and nothing further is needed to make it work). The admin panel has the option to enable/disable the STREETVIEW and/or ROADMAP from being displayed. The Admin side of the maps also has a drop down for BOTH the STREETVIEW and the ROADMAP view to select the zoom level for EACH event.

The Calendar Admin module uses the Date Picker function to select and end date. The Admin side has the event time in an AM/PM dropdown menu. The public side will then automatically display or hide the event times and dates used or not used, meaning there will be no blank fields if you do not include an end time, start time, or end date.

The module also has a simple function to return to the calendar view from the event view in the form of a single "return to calendar" button.

Take note that this module has been broken out into a blade like template system in order to protect the code and make it easier to work with, however, it has been designed to be able to drop right into your project. You will just need to merge the global.php group into your current global.php file.

For the Address to auto-complete on the CMS side add the following code in between the <code></code> tags to the functions.php file in the admin folder (do not add the <code></code> tags)



Code: Select all
                
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&dummy=.js"></script>

<script type="text/javascript">//<![CDATA[
    window.onload=function(){   
        if(document.getElementById("f_location"))
        {
            var input = document.getElementById('f_location');
            var options = {componentRestrictions: {country: 'us'}};
            var autocomplete = new google.maps.places.Autocomplete(input, options);
        }
     }//]]> 
</script>



- Note: The IF statement was added to have the ability to invoke a new instance on another page (e.g., the contact page with a map on it). If you use this auto-address function twice on the same page, you will need to invoke the function from the input using javascipts onfocus="" and put this in a callable function.


You can if you desire use an IFRAME to feed the calendar.php into anywhere on your site.

I hope you enjoy this and fin it helpful :)

- Developernator

Attachments

Hey @developernator, welcome aboard :)
Thanks for sharing the module. Sounds fabulous.
Christmas has come early! Thanks for sharing your code @developernator - look forward to trying out.
:)

I am also currently working on a convert of this module to be in replacement of the Google maps API V2 module. I am variablizing the JS to become more OOP oriented to give the maximum amount of CMS options. I'm just about done, I just have to scrub and pack it. Maybe it can be included in the next version of Couch :)
4 posts Page 1 of 1