How to Extract and Parse HTML to Replace List-Style-Type

I have a widget that pulls certain data from my event calendar. When it list each event it adds a number (bullet) to the left of each event likeso:

  1. Title of Event November 1 @ 6:00 pm - 10:00 pm CDT

the 1. is located in this example #div ol.example_list_widget. I want to manipulate and exchange the 1. with the actual date pulled from the data showing. So instead of 1. It will be

NOV Title of Event
 01 November 1 @ 6:00 pm - 10:00 pm CDT

I would also like to parse the date and time in the data to remove some of the whitespace so the end result is this.

NOV Title of Event
 01 November 1 @ 6:00PM - 10:00PM CDT

Finally, the 1. (bullet) that is parsed and turned into NOV 01 on separate lines would need to be enclosed in separate DIVS so I could style each of them a different color.

Right now it looks like this in the HTML:

<div class="events_widget">
  <ol class="example_list_widget">
     <h4 class="example_h4_widget">
        <a href="/example/">Example Title</a>
      </h4>
  <div class="example_event_duration">
    <span class="example_span_date">November 1 @ 6:00 pm</span>
    " - "
    <span class="example_span_time">10:00 pm</span>
    <span class="example_timezone">CDT </span>
   </div>
 </li>
</ol>
 </div>

How would I go about getting it to look like this:

<div class="events_widget">
  <ol class="example_list_widget" style="list-style-type:none;">
    <div class="new_month_container">
       <div class="new_month">NOV</div>
   <div class="new_date">01</div>
 </div>
 <li class="example_li_widget">
   <h4 class="example_h4_widget">
     <a href="/example/">Example title</a>
   </h4>
  <div class="example_event_duration">
    <span class="example_span_date">November 1 @ 6:00PM</span>
    " - "
    <span class="example_span_time">10:00PM</span>
    <span class="example_timezone">CDT </span>
   </div>
 </li>
</ol>
 </div>