Current status of the Ning Platform is always available on the Ning Status Blog.

This tip will allow you to add a widget to any page which will check against your events and display events that are in the current month and if none will let your members know there are no events so far for this month. It's easy to add and will show you how below. You will also see a couple of images showing how it's displayed.

You can also see it working on my sites homepage here:  https://gromsquad.ning.com/

NOTE: This works only on an event page that is named events, if you have named your something else you can edit the part in bold to change it if required.

DEMO IMAGES

With events for the month

And the display with no events

Here is how to set it up

1. Go to your Social Site Manager Then Pages

2. Choose a page where you want to add the widget

3. Select Add Content

4. Select content type to events

5. Add this as the title IMPORTANT:  eventsMonthWidget

6. Display: set to titles

7. From: upcoming events

8. Show: 1

9. Length: 250

Then click the Add button and it will appear on the page. Click and hold to move it to where you want it then Save the page. Once the page is saved you can then add the code below.

Example of the setup, note I chose Display as detail but Titles is better. It doesn't matter which you choose

First we add a little CSS to our design studio custom css section. By the way if you want the module header a different colour than royal bluse just change the module header colour and the module name colour to what you want.

/*Widget Sections reveal dates and location*/
.eventsMonthWidget .eventPage-detail{
display:none
}
.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(1),
.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(2),
.eventsMonthWidget .eventPage-details ul:nth-child(1) > li:nth-child(3){
display:block!important
}

/* Style the widget */

.eventsMonthWidget .media-frame.eventPage-details > .eventPage-image{
padding-top:33%
}
.eventsMonthWidget .media-frame > .eventPage-image{
max-width:100%
}
.eventsMonthWidget .eventPage-details .entry-title > a{
font-size:1.4em
}
.eventsMonthWidget .eventPage-details .entry-title > a:hover{
color:inherit
}
.eventsMonthWidget .module-header{
background-color:royalblue; border-radius:6px 6px 0px 0px
}
.eventsMonthWidget .module-name{
color:white
}
.section-eventBundle.eventsMonthWidget .media-frame {
margin-bottom: 15px; border:none
}

 

Next we need to add some custom code and this goes in the custom code end of page section via the Social Site Manager

Note: remember this was set up for the default name of the page being called Events. If your is different then edit the events name seen in bold.

<script>
/*Events Month List Widget Code, John Bizley 13-04-2019*/
x$(document).ready(function(){
x$('.module-name:contains(eventsMonthWidget)').hide().closest('.section-eventBundle').addClass('eventsMonthWidget');
x$('.eventsMonthWidget .module-name').text('Events This Month').show();
x$('.eventsMonthWidget .module-body').html('<h1 class="eventsMonthWidget-updating">Updating...</h1>');
x$('.eventsMonthWidget .module-body').load("/events .eventListPage .entry .media-frame.eventPage-details", function(){
//NOW RUN THE CODE TO UPDATE THE MODULE FOR THE DATES
//SHOW EVENTS ONLY FOR THE MONTH YOU ARE IN
var WidgetClass = x$('.module-name:contains(eventsMonthWidget)').closest('.section-eventBundle').addClass('eventsMonthWidget');
var monthsDisplay = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var now = new Date();
var month = months[now.getMonth()];
var monthDisplay = monthsDisplay[now.getMonth()];
var monthselector = ".section-eventBundle.eventsMonthWidget ul:nth-child(1) > li:nth-child(2) > a:nth-child(1):contains("+ month +")";
var monthClass = x$(monthselector).closest('.media-frame').addClass(month);
var presentMonth = monthClass;
var notThisMonth = x$('.section-eventBundle.eventsMonthWidget .media-frame');
notThisMonth.not(presentMonth).remove();
var eventsPresentCount = presentMonth.length;
if(eventsPresentCount <=0){
x$('.section-eventBundle.eventsMonthWidget .module-name').text('No Upcoming '+monthDisplay+' Events');
}else if(eventsPresentCount === 1){
x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Event');
}else{
x$('.section-eventBundle.eventsMonthWidget .module-name').text(' '+monthDisplay+' ('+eventsPresentCount+') Events');
}
x$('.section-eventBundle.eventsMonthWidget .module-footer > a.pull-right').text('View All Events');
x$('.column-narrow .section-eventBundle.eventsMonthWidget .module-name').css('text-align','center');
x$('.eventsMonthWidget .span6.narrow16.tablet16.mobile16').hide();
});
});
</script>

 

That's it, coming next will be how to style the actual events page list to help seperate the events by month.

Enjoy

Bizz :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

⚡JFarrow⌁ posted a discussion
If your Ning site has a dark theme, you may be scratching your head wondering how to make the text…
19 hours ago
Fabricio Giugni replied to Fabricio Giugni's discussion
Blog help needed.
"Hi JFarrow,
Thanks for helping. I don't know much about codes. How to add class="align-left" to the…"
Friday
Fabricio Giugni replied to Fabricio Giugni's discussion
Blog help needed.
"Hi Bizz, 
Thanks for helping. It happen with Image as well. Here is the linkhttps://gplay.com.br/bl…"
Friday
Fabricio Giugni replied to Fabricio Giugni's discussion
Website is too slow. How can I fix it?
"Hi JFarrow,Is there any way to compress and reupload my member's content? All Those Photos are from…"
Friday
⚡JFarrow⌁ commented on Ana Massien's blog post FREE SSL Certificates
"agreed"
Thursday
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
Website is too slow. How can I fix it?
"My 2 cents...
Try to minimize the amount of images loading on the home page...
You dont seem to hav…"
Thursday
⚡JFarrow⌁ posted a discussion
I've been creating topics pages inside my community and if you are doing something similar, having…
Thursday
Fabricio Giugni posted a discussion
Hi there,``My networks are not doing well. How can I fix it? Basically there is just what Ning prov…
Thursday
⚡JFarrow⌁ replied to Unpwn Producer's discussion
I need to secure my site
"Here are the simple steps but you may want to get someone to help you.
Go to cloudflare.com and sig…"
Wednesday
Unpwn Producer replied to Unpwn Producer's discussion
I need to secure my site
"Whatever makes my site not show "not secure" on the browser. Sorry, I'm not familiar with web stuff…"
Wednesday
Trị Sẹo Lồi liked Fabricio Giugni's profile
Wednesday
Trị Sẹo Lồi updated their profile
Wednesday
More…

Meanwhile, you can check our social media channels