TIP: Add Autocomplete to Calendar

[frm]

As suggested by @nik here, I stripped some code from my forum as well as other add ons that I use autocomplete with to make it work with the calendar.

Calendar - Google Place Autocomplete

Deserves its own entry (may have included it elsewhere). Event Create page badly needs Google Place API autocomplete.

nixfifty.com

1. Create a new template nf_custom_location_autocomplete
2. Add the following code to that template:
   

   <script>function initMap() {
   var input = document.getElementById('autoLocation');
   
   var options = {
   types: [ "geocode" , "establishment" ],
   };
   
   var autocomplete = new google.maps.places.Autocomplete(input, options);
   
   autocomplete.addListener('place_changed', function() {
   var place = autocomplete.getPlace();
   });
   }
   </script>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_API_KEY_HERE&amp;libraries=places&callback=initMap" async defer></script>

3. Be sure to update INSERT_YOUR_API_KEY_HERE with yout Google Maps API key before saving.
4. Open nf_calendar_calendar_add_event and replace

               <xf:textboxrow name="location"
                   maxlength="{{ max_length($event, 'event_location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

   With:

               <xf:include template="nf_custom_location_autocomplete" />
               <xf:textboxrow name="location"
                   id="autoLocation"
                   maxlength="{{ max_length($event, 'event_location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

5. Open nf_calendar_event_edit and replace

               <xf:textboxrow name="location" value="{$event.event_location}"
                   maxlength="{{ max_length($event, 'location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

   With:

               <xf:include template="nf_custom_location_autocomplete" />
               <xf:textboxrow name="location" value="{$event.event_location}"
                   id="autoLocation"
                   maxlength="{{ max_length($event, 'location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

Both adding and editing an event should look like this now:



I purposefully put the JavaScript in a template because there's much more that can be added to it to make it more restrictive. For example, I want only things from one country to show (let's say the US). However, I don't want the entire US to show, just Hawaii. As you can't do it by state, you can add geographical bounds around Hawaii with latitude and longitude "boxing".

All of these additional variables can be found in the Google Autocomplete guide:

Place Autocomplete | Maps JavaScript API | Google for Developers

developers.google.com

If you have any questions about boundaries (country specific) or helping draw out a box that you want it to search only instead of the entire world, let me know.

 

[frm]

@NixFifty — feel free to implement as you may. I think just adding a Calendar option of API key and that to a new template name should suffice unless you want to tweak the JS code too. I would've gone with the function initAutocomplete because it's more descriptive, but it was more of a copy/paste job 5 minute job, but if you do that make sure you change &callback=initAutocomplete in the script URL (when adding the nf options API variable).

 

[nik]

As suggested by @nik here, I stripped some code from my forum as well as other add ons that I use autocomplete with to make it work with the calendar.

Calendar - Google Place Autocomplete

Deserves its own entry (may have included it elsewhere). Event Create page badly needs Google Place API autocomplete.

nixfifty.com

1. Create a new template nf_custom_location_autocomplete
2. Add the following code to that template:
   

   <script>function initMap() {
   var input = document.getElementById('autoLocation');
   
   var options = {
   types: [ "geocode" , "establishment" ],
   };
   
   var autocomplete = new google.maps.places.Autocomplete(input, options);
   
   autocomplete.addListener('place_changed', function() {
   var place = autocomplete.getPlace();
   });
   }
   </script>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_API_KEY_HERE&amp;libraries=places&callback=initMap" async defer></script>

3. Be sure to update INSERT_YOUR_API_KEY_HERE with yout Google Maps API key before saving.
4. Open nf_calendar_calendar_add_event and replace

               <xf:textboxrow name="location"
                   maxlength="{{ max_length($event, 'event_location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

   With:

               <xf:include template="nf_custom_location_autocomplete" />
               <xf:textboxrow name="location"
                   id="autoLocation"
                   maxlength="{{ max_length($event, 'event_location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

5. Open nf_calendar_event_edit and replace

               <xf:textboxrow name="location" value="{$event.event_location}"
                   maxlength="{{ max_length($event, 'location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

   With:

               <xf:include template="nf_custom_location_autocomplete" />
               <xf:textboxrow name="location" value="{$event.event_location}"
                   id="autoLocation"
                   maxlength="{{ max_length($event, 'location' )}}"
                   label="{{ phrase('nf_calendar_where') }}"
                   placeholder="{{ phrase('nf_calendar_enter_a_location...') }}" />

Both adding and editing an event should look like this now:

View attachment 1359

I purposefully put the JavaScript in a template because there's much more that can be added to it to make it more restrictive. For example, I want only things from one country to show (let's say the US). However, I don't want the entire US to show, just Hawaii. As you can't do it by state, you can add geographical bounds around Hawaii with latitude and longitude "boxing".

All of these additional variables can be found in the Google Autocomplete guide:

Place Autocomplete | Maps JavaScript API | Google for Developers

developers.google.com

If you have any questions about boundaries (country specific) or helping draw out a box that you want it to search only instead of the entire world, let me know.

What a great gesture. Thanks a lot. Hopefully our friend @NixFifty can add this to the next release.

 

[frm]

What a great gesture. Thanks a lot. Hopefully our friend @NixFifty can add this to the next release.

It really should be core.

 

[Naz]

I've added a version of this to the next update.

For a future iteration, I'll look at making it more configurable (i.e. popping a map, constraining to certain bounds, etc).

 

[nik]

Moved.